3

リスト (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;'s を取得しました (私が読んだことから、#logo にのみ適用されるはずでしたが、各要素でテストしました)。

とにかく、助けていただければ幸いです。

4

2 に答える 2

2

Vertical-align:middle子要素の中央値を親要素の中央値に揃えます。すべての子要素に がfloat:leftある場合、親の高さは 0px であるため、その中央値は子要素の上にあります。

したがって、<br style='clear:both' />メニューの後に を追加すると、DIV は最終的に垂直サイズになります。

于 2010-03-13T17:35:24.010 に答える
0

ここでは、1 行のテーブルが便利です。

<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; }
于 2012-01-15T14:13:38.970 に答える