플렉스 아이템에서 텍스트를 세로 및 가로로 가운데에 맞 춥니 다.

Question

플렉스 박스 예제를 따르려고했는데이 문제로 인해 라인 높이가 작동하지 않습니다.

텍스트는 수직 가운데에 있어야하지만 그렇지는 않습니다. 그것은 단지 수평으로 중심에있는 상단에 남아 있습니다.

코드 스 니펫에서는 잘 작동하는 것 같지만 이상하게 작동한다는 것을 증명하기 위해 내가 본 내용을 제공 할 것입니다.

Chrome과 IE에서이 방법을 테스트했지만 수직으로 정렬하지 않았습니다.

스 니펫의 크기를 변경했는데 그렇게 할 것이라고 생각하지 않습니다.

수직으로

.flex-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    display: -webkit-box; 
 
    display: moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    -webkit-flex-flow: row wrap; 
 
} 
 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-top: 10px line-height: 50px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
}

<ul class="flex-container"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
</ul>

Answer 1

수평 각 플렉스 항목의 텍스트를 중심으로, 코드에이 조정을 :

.flex-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    display: -webkit-box; 
 
    display: moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    -webkit-flex-flow: row wrap; 
 
} 
 
.flex-item { 
 
    display: flex;    /* create nested flex container */ 
 
    justify-content: center;  /* center text horizontally */ 
 
    align-items: center;   /* center text vertically */ 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
}

<ul class="flex-container"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
</ul>

자세한 내용은 다음을 참조하십시오. Flexbox: center horizontally and vertically

Answer 2

";" 라인 - 높이가