كيفية استخدام المحاذاة العمودية:وسط؛على وجه صحيح؟

Question

أريد أن تتم محاذاة قائمتي (التنقل) مع مركز الصورة (الشعار).حاولت استخدام vertical-align: middle;, ، لكن لم أتمكن من تشغيله عندما قمت بتحريك الصور يمينًا ويسارًا.

هذا هو الكود الخاص بي:

لغة البرمجة:

<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, ، فإن ارتفاع الأصل يبلغ 0 بكسل، وبالتالي يكون متوسطه أعلى من العناصر الفرعية.

لذلك، يمكنك إضافة أ <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; }