선 높이가 올바르게 작동하지 않습니다.

Question

내 로고가 수직으로 가운데에 놓이려고합니다. 선 높이를 사용할 때 로고가 생깁니다. 텍스트를 수직으로 내 로고와 함께 올리려면 어떻게해야합니까? 여기 내 코드가있다.

#nav img { 
    vertical-align: middle; 
} 

이이 일을 할 것입니다 :

HTML

<div id="wrapper"> 
    <div id="header"> 
     <div id="nav"> 
     <ul> 
      <li> dfgkdfjg </li> 
      <li><img src="http://i.imgur.com/d0umnxt.png" /></li> 
      <li> pfopkp </li> 
     </ul> 
     </div> 
    </div> 
</div> 

CSS

body { 
    margin: 0px; 
} 

#header { 
    display: table; 
    width: 100%; 
    height: 100px; 
    background-color: #151B1F; 
} 
#nav { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
} 

#nav li { 
    margin-left: 50px; 
    margin-right: 50px; 
    display:inline; 
} 

Answer 1

실제로 당신에게 문제가되는 텍스트를 정렬하려고합니다. 여기에 예를 Link을하고있다

#nav img { 
    vertical-align: middle; 
} 

대신 ... 텍스트가 이미지를 정렬하려고

정렬의 당신의 CSS는이를 추가합니다.

Answer 2

수직 정렬 대신 텍스트의 이미지를 사용해보십시오.