Vertical align text inside of list item

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>

how can I vertical align text on list item, without using display: flex; align-items-center. And only inline css.

Answer 1

Try this

without using display: flex; align-items-center. And only inline 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>