垂直对齐列表项内的文本

Question

<ul>
  <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
   <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code1%]</div></li>
  <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
   <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code2%]</div></li>
  <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
   <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code3%]</div></li>
  <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
   <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code4%]</div></li>
</ul>

如何在不使用 display: flex 的情况下垂直对齐列表项上的文本；对齐项目中心。并且仅内联 css.

Answer 1

试试这个：

  <ul>
    <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
     <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; display: inline-block; vertical-align: middle">[%code1%]</div></li>
    <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
     <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; display: inline-block; vertical-align: middle">[%code2%]</div></li>
    <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
     <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; display: inline-block; vertical-align: middle">[%code3%]</div></li>
    <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
     <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; display: inline-block; vertical-align: middle">[%code4%]</div></li>
  </ul>

理论上这会改变 vertical-align 风格。问题是你的 <li> 和内部 <div> font-size 之间的区别。试试 adding a custom <li> bullet 代替

Answer 2

试试这个

不使用显示器：flex；对齐项目中心。并且仅内联 css.

<ul style="list-style:none">
  <li style="margin: 0; padding-bottom: 23px;">
    <span style="font-size:40px; vertical-align: middle;margin-right:10px">&#8226</span>
    <span style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; vertical-align: middle;">  [%code1%]</span>
  </li>
  <li style="margin: 0; padding-bottom: 23px;">
    <span style="font-size:40px; vertical-align: middle;margin-right:10px">&#8226</span>
    <span style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; vertical-align: middle;">  [%code1%]</span>
  </li>
    <li style="margin: 0; padding-bottom: 23px;">
    <span style="font-size:40px; vertical-align: middle;margin-right:10px">&#8226</span>
    <span style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; vertical-align: middle;">  [%code1%]</span>
  </li>


</ul>

Answer 3

即使您需要使用内联 CSS，我认为您可以稍微简化代码并通过将其中一些属性添加到 <ul>.[=14 来利用级联=]

可能有不止一种方法可以做到这一点，但我在 <div> 中添加了 display: table-cell; vertical-align: middle;...

<ul style="color: black; font-family: 'Arial', sans-serif; font-size: 32px;">
  <li style="margin: 0; padding-bottom: 23px;">
    <div style="font-size: 17px; display: table-cell; vertical-align: middle;">[%code1%]</div>
  </li>
  <li style="margin: 0 0 23px 0;">
    <div style="font-size: 17px; display: table-cell; vertical-align: middle;">[%code2%]</div>
  </li>
  <li style="margin: 0 0 23px 0;">
    <div style="font-size: 17px; display: table-cell; vertical-align: middle;">[%code3%]</div>
  </li>
  <li style="margin: 0 0 23px 0;">
    <div style="font-size: 17px; display: table-cell; vertical-align: middle;">[%code4%]</div>
  </li>
</ul>

Answer 4

将这些属性添加到 div

display: inline;
    line-height: 2;
    vertical-align: bottom;

<ul>
  <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
   <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;display:inline;line-height:2;vertical-align:bottom;">[%code1%]</div>
</li>
  
  
  
</ul>

垂直对齐列表项内的文本

Vertical align text inside of list item

css

inline

listitem

vertical-alignment