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

Question

在以下代码段中，我试图显示一个无序列表，其中的项目符号font-size要比关联<li>元素的要大。但是，在第二个元素的情况下，项目符号点与图像的上角对齐。有没有一种方法可以强制项目符号点与<li>元素的中心（在本例中为<span>）对齐？

---

li{
	font-size: 24px;
}

li span{
	font-size: 14px;
}

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