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>

사용하는 대신 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속성은 flex 항목에 적용됩니다 . 귀하 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는 플렉스 항목입니다.

가장 투표 된 답변은 내용 (텍스트)이 요소 안에 싸여있는 OP에 의해 게시 된 이 특정 문제 를 해결 하는 것 inline-block입니다. 어떤 경우 에는 컨테이너 내부에 일반 요소를 세로로 가운데에 배치하는 것이 좋을 수도 있습니다. 내 경우에도 적용되므로 필요한 것은 다음과 같습니다.

align-self: center;

가장 좋은 방법은 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;
}

결과

HTML

<ul class="list">
  <li>This is the text</li>
  <li>This is another text</li>
  <li>This is another another text</li>
</ul>

align-items대신에 사용 align-self하고에 추가 flex-direction했습니다 column.

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- I added this */
  align-items: center;   /* <--- Change here */
  height: 100px;
  width: 100%;
  background: silver;
}

.list li {  
  background: gold;
  height: 20%; 
}

를 사용 display: flex하면 HTML 요소의 수직 정렬을 제어 할 수 있습니다.

.box {
  height: 100px;
  display: flex;
  align-items: center; /* Vertical */
  justify-content: center; /* Horizontal */
  border:2px solid black;
}

.box div {
  width: 100px;
  height: 20px;
  border:1px solid;
}

<div class="box">
  <div>Hello</div>
  <p>World</p>
</div>

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