FlexBox 내부에서 텍스트를 세로로 정렬하는 방법은 무엇입니까?

FlexBox 내부에서 텍스트를 세로로 정렬하는 방법은 무엇입니까?

---

flexbox를 사용하여 일부 내용을 세로로 정렬 <li>하지만 큰 성공을 거두고 싶지 않습니다.

온라인에서 확인했으며 많은 자습서가 실제로 align-items:center부모의 flex 설정에서 가져 오는 래퍼 div를 사용 하지만이 추가 요소를 잘라낼 수 있는지 궁금합니다.

목록 항목 높이가 동적이기 때문에이 인스턴스에서 flexbox를 사용하기로 선택했습니다 %.

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

---

편집 : 내 대신 Michael_B의 답변을 사용하십시오 .

가능한 경우이 답변을 삭제하지만 허용 된 답변은 삭제할 수 없습니다.

---

flex-direction수직 을 사용하면 (을 사용하여 column) justify-content: center수직 중앙에 배치됩니다. 그런 다음 text-align: center가로로 가운데에 맞추는 데 사용할 수 있습니다.

li {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

다음 은 codepen의 데모 데모입니다 .

---

사용하는 대신 align-self: center사용 align-items: center.

다른 답변 에서 제안한대로 변경 flex-direction하거나 사용할 필요가 없습니다 .text-align

다음은 한 번의 조정으로 모든 코드를 작동시키는 코드입니다.

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%; 
}

이 align-self속성은 플렉스 항목에 적용됩니다 . 귀하 li의 상위 항목 인 – ul가 display: flex없거나 display: inline-flex적용 되지 않았기 때문에 귀하 는 유동 항목 이 아닙니다 .

따라서, ul플렉스 컨테이너 li는 아니고, 플렉스 아이템은 아니고, align-self효과가 없습니다.

align-items속성과 유사 align-self은 적용을 제외하고, 플렉스 용기 .

(가) 때문에 li가요 성 용기이며, align-items수직 자식 요소의 중심을 사용할 수있다.

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

코덱 데모

---

기술적으로, 방법 align-items과 align-self작동 방식은 다음 과 같습니다 .

align-items컨테이너 의 속성은 align-self(항목의) 기본값을 설정합니다 . 따라서 align-items: center모든 플렉스 항목이로 설정됩니다 align-self: center.

그러나 align-self개별 항목 을 조정하여이 기본값을 무시할 수 있습니다 .

예를 들어, 동일한 높이 열을 원할 경우 컨테이너가로 설정됩니다 align-items: stretch. 그러나 하나의 항목을 맨 위에 고정해야하므로로 설정됩니다 align-self: flex-start.

예

---

텍스트는 어떻게 유연 아이템입니까?

어떤 사람들은 어떻게 텍스트가 실행되는지 궁금 할 것입니다 ...

<li>This is the text</li>

의 하위 요소입니다 li.

인라인 수준 요소로 명시 적으로 줄 바꿈되지 않은 텍스트는 인라인 상자로 알고리즘 적으로 줄 바꿈되기 때문입니다. 이것은 익명 인라인 요소 와 부모의 자식으로 만듭니다.

CSS 사양에서 :

9.2.2.1 익명 인라인 박스

블록 컨테이너 요소 내에 직접 포함 된 모든 텍스트는 익명 인라인 요소로 처리되어야합니다.

flexbox 사양은 유사한 동작을 제공합니다.

4. 플렉스 아이템

플렉스 컨테이너의 각 유입 하위 항목은 플렉스 항목이되고, 플렉스 컨테이너 내부에 직접 포함 된 각 연속 텍스트는 익명의 플렉스 항목으로 래핑됩니다.

따라서의 텍스트 li는 플렉스 항목입니다.

---

미래 Google 직원의 경우

가장 많이 투표 된 답변과 두 번째로 가장 많은 답변 은 OP 가 게시 한이 특정 문제 를 해결하기위한 것입니다 . 내용 (텍스트)이 인라인 블록 요소 안에 "알고리즘 방식으로"포장되어 있습니다. 그러나 귀하의 경우는 컨테이너 내부에 일반 요소를 수직으로 중심에 두는 것입니다. 내 경우에도 적용되므로 필요한 것은

align-self: center;

이것은 위에서 언급 한 쿼리의 최고 결과이기 때문에 여기에 두었습니다. 그리고 꽤 오랫동안 혼란 스러웠습니다. * Derp *

---

가장 좋은 방법은 flexbox 안에 flexbox를 넣는 것 입니다. 당신이해야 할 일은 아이에게주는 것 align-items: center입니다. 그러면 부모 내부의 텍스트가 세로로 정렬됩니다.

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}

---

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  align-items:center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

---

ul및 li표시를 table및로 변경할 수 있습니다 table-cell. 그렇다면 vertical-align당신을 위해 일할 것입니다 :

ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}

http://codepen.io/anon/pen/pckvK

참고 URL : https://stackoverflow.com/questions/25311541/how-to-vertically-align-text-inside-a-flexbox