Comment utiliser vertical-align: milieu; correctement?

Question

Je veux avoir ma liste (nav) aligner au centre d'une image (logo). J'ai essayé d'utiliser vertical-align: middle;, mais je ne pouvais pas le faire fonctionner quand je flottais les images gauche et à droite.

Voici mon code:

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;
            }

Je pris toutes les années vertical-align: middle; d'où je les mets (je l'ai testé dans chaque élément, même si elle ne devait être appliqué à #logo, de ce que je l'ai lu.)

Quoi qu'il en soit, toute aide serait appréciée.

Answer 1

Vertical-align:middle aligne la médiane de l'élément enfant à la médiane de l'élément parent. Si tous les éléments de l'enfant ont float:left, le parent a une hauteur de 0px et par conséquent, la médiane est au-dessus des éléments de l'enfant.

Alors, vous pouvez ajouter un <br style='clear:both' /> après votre menu et la DIV sera finalement obtenir sa taille verticale.

Answer 2

table avec ligne unique est ici à portée de main.

<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; }