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

试试这个：

＆＃13;

  <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>

＆＃13;

理论上这会改变vertical-align风格。问题是您的<li>和内部<div> font-size之间存在差异。请尝试adding a custom <li> bullet到您的列表

Answer 2

试试这个

不使用display：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>添加其中一些属性来利用级联。

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

<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;

＆＃13;

<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>

＆＃13;

列表项内的垂直对齐文本

4 个答案: