مشكلة المحاذاة العمودية لخلية الجدول

Question

لقد قمت بتعيين تعويم لإحدى خلايا طاولتي.لكن الآن لا يمكنني تغيير المحاذاة الرأسية لمحتوياتها.بشكل افتراضي، يقوم بنقل المحتويات إلى أعلى الملف div.حاولت valign: middle, vertical-align: middle دون نجاح.وهنا النتائج:

مع float: left

بدون float: left

كيف يمكنني محاذاة محتويات الخلية عموديًا مع التعويم؟والترميز يبدو هكذا

<td id="top_logo">
    <a href="index.php">
        <img src="core/design/img/logo.png" style="height:40px; padding:3px;"/>
    </a>
</td>
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>

Answer 1

لا أعرف ما إذا كان هذا سيساعد (لقد تركت التخطيطات القائمة على الجدول الآن)، ولكن لحل مشكلة مماثلة باستخدام الخط المستقيم divيمكنك أن تفعل الشيء نفسه باستخدام line-height قاعدة.

<div id="tableRow">
    <div id="leftCell"><img src="mylogo" /></div>
    <div id="middleCell">&nbsp;</div>
    <div id="rightCell">User Name Here</div>
</div>

سيتم إنشاء CSS الخاص بك لتعيين العرض/الارتفاعات وما إلى ذلك، وهو ما أعتقد أنك لن تحتاجه لجدول، وبالنسبة لـ "rightCell"، يمكنك تعيين ارتفاع الخط ليكون نفس ارتفاع الصف:

#rightCell
{
    height: 30px;
    line-height: 30px;
}

ما يحدث بعد ذلك هو أن النص يتم توسيطه عموديًا في مساحة السطر، والذي نظرًا لأنه نفس الارتفاع، فإنه يعطي الانطباع بأنه في وسط العنصر أيضًا.

الآن كما قلت، لم أجرب هذا مطلقًا على خلية جدول، ولكن أي متصفح حديث يجب أن يسمح لك بتغيير خاصية العرض لتقول block أو inline-block استخدام:

display: block;

تغيير الكتلة لأي من الأنواع الأخرى عند الحاجة.سيؤدي هذا إلى تعيين نوع عرض الخلية ليكون مثل div (أو فترة، أو أي عنصر آخر) ولكني لا أعرف ما هو تأثير ذلك على الطاولة.

لاحظ أيضًا أنني لا أتناول المتصفحات الأقدم مثل IE6 هنا، ولجعل هذا يعمل بشكل شامل، قد يتعين عليك إجراء بعض الاختراقات للمتصفحات الأقدم إذا كان الدعم مطلوبًا.