تتغير المحاذاة العمودية لعنصر الجدول عند إضافة عنصر تحكم داخل TD

Question

لقد كنت أتساءل عن هذا.لماذا تتأثر محاذاة td عند وضع عناصر التحكم بداخله.

على سبيل المثال.

<tr>
  <td>Row 1</td>
  <td>
    <input type="text" />
    <input type="button" value="Select" />
  </td>
  <td>Selected Value 1</td>
</tr>
<tr>
  <td>Row 2</td>
  <td colspan="2">
    <input type="text" />
    <input type="button" value="Select" />
    Selected Value 2
  </td>
</tr>

ال "الصف 1"النص يتماشى مع"القيمة المختارة 1".إلا أن النص "القيمة المختارة 2"" للأسفل قليلاً وغير متمركز وغير محاذٍ "الصف 2".

لقد حاولت بالفعل المحاذاة العمودية للوسط أو حتى المحاذاة ولم تنجح.يحدث ذلك في كل من IE وFirefox.وهو أكثر وضوحا في IE.أنا حقا لا أفهم هذا.

Answer 1

عندما حاولت إضافة وسط محاذاة عموديًا إلى عنصر التحكم الآخر داخل td, ، يبدو أنه يضع كل شيء في المنتصف.إنه سلوك غريب في IE ولكنه أدى إلى حل مشكلتي.

<tr>
  <td>Row 1</td>
  <td>
    <input type="text" />
    <input type="button" value="Select" />
  </td>
  <td>Selected Value 1</td>
</tr>
<tr>
  <td>Row 2</td>
  <td colspan="2">
    <input type="text" style="vertical-align: middle;" />
    <input type="button" value="Select" style="vertical-align: middle;" />
    Selected Value 2
  </td>
</tr>

Answer 2

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

إذا قمت بتغيير ارتفاعات الأسطر لكل أجزاء النص إلى قيمة أكبر، فستصطف جميعها.

td  {line-height:500%;}

Answer 3

تحتوي عناصر التحكم في الإدخال على ارتفاعات أسطر مختلفة عن النص القياسي.لذا، عندما تضع عناصر التحكم هذه، المضمنة أصلاً، بجوار النص، فإنها تجبر الخط الأساسي/ارتفاع الخط على التصرف بشكل مختلف عما قد يتصرف به النص بدونه.ويحدث هذا أيضًا إذا قمت بوضع صورة بجوار النص دون تحريكها (يحاذي النص نفسه مع الجزء السفلي من الصورة، حتى يلتف في السطر التالي).

يجب أن تكون قادرًا على التحايل على ذلك عن طريق تحريك عناصر التحكم في الإدخال إلى اليسار، أو ربما عن طريق تغيير line-height من النص.

يحرر:يبدو أن هذا يعمل بشكل جيد بالنسبة لي ..

<table>
    <tr>
        <td>Row 1</td>
        <td>
            <input type="text" />
            <input type="button" value="Select" />
        </td>
        <td>Selected Value 1</td>
    </tr>
    <tr>
        <td style="">Row 2</td>
        <td style="line-height: 120%" colspan="2">  
            <input type="text" />  
            <input type="button" value="Select" />  
            Selected Value 2
        </td>
    </tr>
</table>