如何将 LI 垂直居中对齐答案

【问题标题】：How to align LI vertically middle如何将 LI 垂直居中对齐
【发布时间】：2014-02-21 17:08:12
【问题描述】：

我的 HTML UL 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>

它给出如下所述的输出：

如何将最后一列中的 RADIO Boxes 和文本“C”与 LI 垂直居中对齐；沿着红线画？

【问题讨论】：

@j08691 ;对不起，我没有得到你？什么是乌格？ [在上面的帖子中添加了内联 CSS 只是为了提供 UI 的外观，在实际代码中 CSS 是外部的]
呃，我是在举手尝试调试这个。

标签： html css html-lists vertical-alignment

【解决方案1】：

通过添加顶部和底部填充；我设法将单选按钮与 LI 垂直居中对齐。我认为这不是万无一失的解决方案；但作为一种解决方法，它是有效的。

【讨论】：

【解决方案2】：

您想要添加一个垂直对齐：底部；将其与红线对齐。但我真的会避免使用内联 CSS，因为它会使你的 html 看起来干净利落。

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

【讨论】：

我为 C 添加了 vertical-align: bottom 到 LI ；但它现在正在工作。 [在读取代码中 CSS 是外部的]