Выровнять текст по вертикали внутри элемента списка

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

Добавьте эти свойства к 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>

Answer 2

Попробуйте это

без использования дисплея: flex; выравнивать-всевозможные-центр. И только 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>

Answer 3

Даже если вам нужно использовать встроенный 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>

Answer 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. Попробуйте добавить пользовательский bullet в свой список вместо