수직 정상 사용 방법 : 중간; 제대로?

Question

내 목록 (NAV)이 이미지 (로고)의 중심에 맞추고 싶습니다. 나는 사용을 시도했다 vertical-align: middle;, 그러나 이미지를 왼쪽과 오른쪽으로 떠 올렸을 때 작동하지 못했습니다.

내 코드는 다음과 같습니다.

HTML :

<div id="head">
    <img id="logo" src="logo.png" />
    <ul id="nav">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

CSS :

#head {
    margin-top: 2px;
    width: 100%;
}
    #logo {
        float: left;
        }

    ul#nav {
        float: right;
        }

        ul#nav li {
            display: inline;
            list-style-type: none;
            }

나는 모든 것을 가져 갔다 vertical-align: middle;'내가 넣은 곳에서 (나는 그것을 읽은 내용에서 #logo에만 적용되어야하더라도 각 요소에서 테스트했습니다.)

어쨌든, 어떤 도움이든 감사 할 것입니다.

Answer 1

Vertical-align:middle 아동 요소의 중앙값을 부모 요소의 중앙값에 맞 춥니 다. 모든 어린이 요소가있는 경우 float:left, 부모의 높이는 0px이고, 따라서 중앙값은 아동 요소보다 높습니다.

따라서 추가 할 수 있습니다 <br style='clear:both' /> 메뉴가 끝나면 DIV가 마침내 수직 크기를 얻습니다.

Answer 2

단일 행이있는 테이블은 여기에 편리합니다.

<div id="head">

<table>
<tr>

<td>
  <h1>Fluid Heading</h1>
</td>

<td style="width: 5%">
  <img id="logo" src="logo.png" />
</td>

<td style="width: 5%">
  <ul id="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</td>

</tr>
</table>

</div>

CSS :

.head td { vertical-align: middle; }