Как выровнять LI вертикально среднего

Я HTML UL LI теги, расположенные, как указано ниже:Как выровнять LI вертикально среднего

<html> 
    <head> 
    </head> 
    <body style="margin: 0px;"> 
    <ul style="display: table; width:98%; margin: 5px; padding: 0; min-width:500px;"> 
    <li style="display:table-row; padding: 0; margin: 0;"> 
     <ul style="padding: 0; margin: 0;"> 
      <li style="float:left; text-align:center; display:table-cell; width:5%; min-height: 50px; ">A</li> 
      <li style="float:left; display:table-cell; width:87%; min-height: 50px; ">B</li> 
      <li style="float:left; text-align:center; display:table-cell; width:8%; min-height: 50px; "><input type="submit" name="one" id="one" value="one"></li></ul> 
    </li> 
    <li style="display:table-row; padding: 0; margin: 0;"> 
     <ul style="padding: 0; margin: 0;"> 
      <li style="float:left; display:table-cell; width:92%; min-height: 100px; "> 
      <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;">Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. SamplText here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. </div> 
     </li> 
     <li style="float:left;text-align:center; display:table-cell; width:8%; min-height: 100px; "> &nbsp; C</li> 
    </ul> 
    </li> 
    <li style="display:table-row; padding: 0; margin: 0;"> 
     <ul style="padding: 0; margin: 0;"> 
     <li style="float:left; text-align:center; display:table-cell; width:5%; min-height: 100px; "><input type="radio" name="optia" value="a" id="optia">A</li> 
     <li style="float:left; display:table-cell; width:87%; min-height: 100px; "><div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;">Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. </div></li> 
     <li style="float:left; text-align:center; display:table-cell; width:8%; min-height: 100px; "> &nbsp; C</li> 
     </ul> 
     </li> 
     </ul> 
    </body> 
</html>

Это дает выход, как указано ниже:

enter image description here

Как я могу Align RADIO Boxes и текст «C» в последнем столбце вертикально посередине с LI; вдоль RED Line Drawn?

источник

2014-01-29 Pawan Mude

Ug, inline CSS. – j08691

@ j08691; Извините, я вас не понял? Что такое Ug? [Inline CSS добавлены в вышеприведенный пост, чтобы дать внешний вид пользовательского интерфейса, в реальном коде CSS внешние) –

Ug - я бросаю руки в воздух, пытаясь отладить это. – j08691

Ваше желание добавить вертикальное выравнивание: снизу; чтобы выровнять его по красной линии. Но я бы действительно избегал использования встроенного CSS, так как он будет искажать ваш html, выглядя чистым и четким.

style="vertical-align: bottom" // add to your li for the C

источник

2014-01-29 17:58:48 Cam

Я добавил вертикальное выравнивание: снизу до LI для C; но теперь он работает. [В прочитанном коде CSS является внешним] –

за счет добавления ТОП & НИЖНИЙ отступы; Мне удалось выровнять переключатель, вертикально центрированный с помощью LI. Я не думаю, что это безупречное решение; Но, как работает, это работает.

источник

2014-01-30 07:33:58

Как выровнять LI вертикально среднего

ответ

Смежные вопросы