垂直对齐列表项内的文本答案

【问题标题】：Vertical align text inside of list item垂直对齐列表项内的文本
【发布时间】：2018-04-28 11:42:03
【问题描述】：

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

【问题讨论】：

标签： css inline vertical-alignment listitem

【解决方案1】：

试试这个

不使用 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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

将这些属性添加到 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>

【讨论】：

【解决方案4】：

试试这个：

  <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 添加到您的列表中

【讨论】：