수직으로 h1과 span을 중앙에 배치하는 방법

Question

나는 이것에 대한 해결책을 찾고자했지만 여전히 할 수 없었다.

나는 수직 방향으로 h1과 span을 description_contenti 안에 넣어야합니다.

그러나 캐치가 있습니다. 전화 변수가 비어 있지 않은 경우에만 나타납니다. 어떤 전화가 유일한 판매자 자체를 중심으로하지 않는 경우, 수직으로 함께 중심으로하고, 같은 시간에 : 여기

<li id="description_content"> 
    <h1>Seller</h1> 
    <br> <br> 
    <span>Phone: </span> <br> 
</li> 

내 CSS입니다 : 그래서 판매자와 전화는 방법으로 그것을 할 필요가

#description_content{ 
    height:163px !important; 
    font-size:16px; 
    } 

#description_content h1{ 
    font-size:16px; 
    font-weight:normal; 
    padding:14px 10px 20px 7px; 
    } 

#description_content span{ 
    padding:0 10px 0 7px; 
    float:left; 
    font-weight:normal !important; 
    } 

내가이 내용을 중심으로뿐만 아니라 놨 코드 아래를 포함하여, 여러 가지 가능성을 시도 li 후 따라 그 다음은

display:table-cell!important; 
vertical-align:middle!important; 

이 바이올린입니다 : http://jsfiddle.net/pazzesco/vykqv19j/

달성 방법에 대한 의견이 있으십니까?

Answer 1

의견에서 알 수 있듯이 li을 모두 같은 줄에 쓰고 싶지는 않습니다. 당신의 테이블로 li 수직으로 중앙에 정렬 된 테이블 셀 같은 li-wrapper를 표시, 그리고

<li class="description_content"> 
    <div class="li-wrapper"> 
     <h1>Seller</h1> 
     <span>Phone: </span> 
    </div> 
</li> 

:

는 다음과 같은 구조를 사용합니다.

.description_content{ 
    display: table; 
    width: 100%; 
    height:163px !important; 
    font-size:16px; 
} 

.description_content .li-wrapper { 
    display: table-cell; 
    vertical-align: middle; 
}