li 내부의 CSS 세로 정렬 텍스트

<li> 태그에서 생성 된 고정 높이와 너비가있는 행에 여러 상자를 표시하고 있습니다. 이제 텍스트를 세로 중앙에 정렬해야합니다. CSS vertical-align은 영향을 미치지 않습니다. 뭔가 빠진 것일까 요 ???

(여백, 패딩, 줄 높이)를 사용하는 트릭을 찾고 있지 않습니다. 일부 텍스트가 길고 두 줄로 나뉘 기 때문에 작동하지 않습니다.

실제 코드를 찾으십시오.

CSS 코드

ul.catBlock{
  width:960px; 
  height: 270px; 
  border:1px solid #ccc; 
}

ul.catBlock li{
  list-style: none; 
  float:left; 
  display:block; 
  text-align: center; 
  width:160px; 
  height: 100px;
}

ul.catBlock li a{ 
  display: block;  
  padding: 30px 10px 5px 10px; 
  height:60px;
}

HTML 코드

<ul class="catBlock">
 <li><a href="#">IP Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>

와 부모 정의 display: table와 함께 요소 자체 vertical-align: middle와 display: table-cell.

line-height텍스트를 세로로 정렬하는 방법입니다. 그것은 꽤 표준이고 나는 그것을 "해킹"이라고 생각하지 않습니다. 그냥 추가 line-height: 100px하면 ul.catBlock li괜찮을 것입니다.

이 경우 ul.catBlock li a안에있는 모든 텍스트 li도 a. 이 작업을 할 때 이상한 일이 발생하는 것을 보았으므로 둘 다 시도하고 어떤 것이 작동하는지 확인하십시오.

몇 년이 늦었을지 모르지만이 문제를 접한 사람은

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

flexbox에 대한 브라우저 지원은 @scottjoudry가 위에 그의 응답을 게시했을 때보 다 훨씬 낫지 만 훨씬 오래된 브라우저를 지원하려는 경우 접두사 또는 다른 옵션을 고려할 수 있습니다. 캐니 우스 : 플렉스

놀랍게도 (또는 그렇지 않은 경우)이 vertical-align도구는 실제로이 작업에 가장 적합합니다. 무엇보다도 자바 스크립트가 필요하지 않습니다.

다음 예제에서는 outer클래스를 본문 inner중간에 배치하고 outer클래스를 클래스 중간에 배치합니다 .

미리보기 : http://jsfiddle.net/tLkSV/513/

HTML :

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

CSS :

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

수직 정렬은 서로 옆에있는 요소의 중심을 정렬하여 작동합니다. 단일 요소에 수직 정렬을 적용해도 아무런 효과가 없습니다. 너비는 없지만 컨테이너의 높이 인 두 번째 요소를 추가하면 단일 요소가이 너비가없는 요소와 함께 세로 중앙으로 이동하여 세로 중앙에 배치됩니다. 유일한 요구 사항은 두 요소를 인라인 (또는 인라인 블록)으로 설정하고 vertical-align 속성을로 설정하는 것 vertical-align: middle입니다.

참고 : 아래의 내 코드에서 내 <span>태그와 <div>태그가 접촉 하고 있음을 알 수 있습니다 . 둘 다 인라인 요소이기 때문에 공백은 실제로 너비가없는 요소와 div 사이에 공백을 추가하므로 반드시 생략해야합니다.

앞으로이 문제는 flexbox로 해결 될 것입니다. 현재 브라우저 지원은 음울하지만 현재의 모든 브라우저에서 하나 또는 다른 형태로 지원됩니다.

브라우저 지원 : http://caniuse.com/flexbox

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

Flexbox에 대한 배경 정보 : http://css-tricks.com/snippets/css/a-guide-to-flexbox/

코드 나 예제를 제공하지 않는 Asaf의 답변을 제외하고 여기에 제공된 완벽한 답변이 없으므로 내 기여를하고 싶습니다 ...

메이크업의에 중위 vertical-align: middle;작업, 당신은 사용할 필요가 display: table;당신을 위해 ul요소 display: table-cell;에 대한 li요소 및 사용할 수있는 것보다 vertical-align: middle;위해 li요소.

당신은 어떤 명시를 제공 할 필요가 없습니다 margins, paddings당신의 텍스트를 수직으로 중간 만들 수 있습니다.

데모

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}

여기에 설명 된대로 : https://css-tricks.com/centering-in-the-unknown/ .

실제 사례에서 테스트 한 것처럼 가장 안정적이고 우아한 솔루션은 <li />첫 번째 자식으로 요소에 일관된 인라인 요소를 삽입하는 것입니다.이 요소는 높이를 100 % (부모 높이의 <li />)로 vertical-align설정하고 중간 으로 설정해야합니다. . 이를 위해를 넣을 수 <span />있지만 가장 편리한 방법은 li:after의사 클래스 를 사용하는 것입니다 .

스크린 샷 :

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul.menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}

이 솔루션을 사용해보십시오

대부분의 경우 가장 잘 작동합니다.

당신은 사용 할 수 있습니다 DIV 대신 리튬 그것을 위해

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

수직 정렬 중간에 대한 간단한 솔루션 ... 나에게는 매력처럼 작동합니다.

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}