如何對齊李垂直方向的中間

我已經安排HTML UL李標籤如下所述：如何對齊李垂直方向的中間

<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

我怎麼能對齊單選按鈕和最後一列中的文本「C」與LI垂直居中;沿着RED線繪製？

來源

2014-01-29 Pawan Mude

Ug，內聯CSS。 – j08691

@ j08691;對不起，我沒有得到你？什麼是Ug？ [在上面的帖子中添加了內聯CSS，以提供UI的外觀和感覺，在實際代碼中，CSS是外部的] –

Ug是我將手放在空中試圖進行調試。 – j08691

你要添加一個vertical-align：bottom;將其與紅線對齊。但我真的會避免使用內聯CSS，因爲它會讓你的html看起來乾淨而清爽。

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

來源

2014-01-29 17:58:48 Cam

我爲C添加了vertical-align：bottom到LI;但它現在正在工作。 [在閱讀代碼CSS是外部] –

通過添加頂部&底部填充;我設法對齊垂直居中與李的單選按鈕。我不認爲這是一個不錯的解決方案;但作爲解決方法，它的工作原理。

來源

2014-01-30 07:33:58

如何對齊李垂直方向的中間

回答

相關問題