将项目符号点与<li>元素的中心对齐

Question

在下面的代码段中，我尝试显示一个无序列表，其中的项目符号点大于关联的font-size元素<li>。但是，在第二个元素的情况下，项目符号点与图像的上角对齐。有没有办法改变它以强制子弹点与<li>元素的中心对齐（在这种情况下，<span>）？

＆＃13;

＆＃13;

li{
	font-size: 24px;
}

li span{
	font-size: 14px;
}

.table-display{
	display: table-cell;
	vertical-align: middle;
}

＆＃13;

<ul>
    <li>
        <span>
        Welcome to the help page
        </span>
    </li>
    
    <li>
        <span>
            <div class="table-display">
                <img src="http://images.clipartpanda.com/phone-icon-molumen_phone_icon.png" alt="phone icon" height="64" width="64">
            </div>
		    <div class="table-display">
		        The Help Desk<br/>
			    phone number is :<br/>
                <span style="font-weight:bold;">(+01)2 34 56 78 90</span>
            </div>
        </span>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这种情况正在发生，因为您的span元素没有计算高度。要解决此问题，我们可以将span元素设置为display设置为inline-table并将vertical-align设置为middle：

li span {
    display: inline-table;
    vertical-align: middle;
}

li{
	font-size: 24px;
}

li span{
    display: inline-table;
	font-size: 14px;
    vertical-align: middle;
}

.table-display{
	display: table-cell;
	vertical-align: middle;
}

<ul>
    <li>
        <span>
        Welcome to the help page
        </span>
    </li>
    
    <li>
        <span>
            <div class="table-display">
                <img src="http://images.clipartpanda.com/phone-icon-molumen_phone_icon.png" alt="phone icon" height="64" width="64">
            </div>
		    <div class="table-display">
		        The Help Desk<br/>
			    phone number is :<br/>
                <span style="font-weight:bold;">(+01)2 34 56 78 90</span>
            </div>
        </span>
    </li>
</ul>

Answer 2

在这种情况下最好使用背景图片。

＆＃13;

＆＃13;

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 25px;
  background: url("http://files.softicons.com/download/toolbar-icons/16x16-free-toolbar-icons-by-aha-soft/png/16/arrow-right.png") left center no-repeat;
}

li span {
  padding: 10px;
  font-size: 14px;
}

.table-display {
  display: table-cell;
  vertical-align: middle;
}

＆＃13;

<ul>
  <li>
    <span>
      Welcome to the help page
    </span>
  </li>

  <li>
    <span>
      <div class="table-display">
        <img src="http://images.clipartpanda.com/phone-icon-molumen_phone_icon.png" alt="phone icon" height="64" width="64">
      </div>
      <div class="table-display">
        The Help Desk<br/>
        phone number is :<br/>
        <span style="font-weight:bold;">(+01)2 34 56 78 90</span>
      </div>
    </span>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;