如何将LI垂直居中对齐
[英]How to align LI vertically middle
问题描述
I've HTML UL LI tags arranged as mentioned below: 
我有如下所述的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; "> 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; "> C</li>
</ul>
</li>
</ul>
</body>
</html>
It gives output as mentioned below: 它给出如下所示的输出：
How Can i Align RADIO Boxes and Text "C" in the last column vertically middle with the LI ; 我如何将RADIO框和最后一列中的文本“ C”与LI对齐； along RED Line Drawn? 沿红色线绘制？
2 个解决方案
解决方案1
0 2014-01-29 17:58:48
Your going to want to add a vertical-align: bottom; 您将要添加一个vertical-align：bottom; to align it to the red line. 使其与红线对齐。 But I would really avoid using inline CSS as it will muck up your html from looking clean and crisp. 但是我真的会避免使用内联CSS，因为它将使您的html看起来不干净。
style="vertical-align: bottom" // add to your li for the C
解决方案2
0 2014-01-30 07:33:58
By Adding TOP & BOTTOM PADDING ; 通过添加顶部和底部填充; i managed to align radio button vertically centered with LI. 我设法使单选按钮与LI垂直居中对齐。 I don't think this is fool-proof solution; 我认为这不是万无一失的解决方案。 But as a work-around it works. 但是，作为一种变通办法，它可以工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.