将项目符号点与< li>的中心对齐元素 [英] Align bullet point with the center of <li> elements

问题描述

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

In the following snippet, I am trying to display an unordered list with bullet points with a font-size bigger than the associated <li> elements. However, in the case of the 2nd element, the bullet point is aligned with the upper corner of the image. Is there a way to change that to force the bullet point to align with the center of the <li> elements (in this case, the <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>

推荐答案

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

This is happening because your span element has no computed height. To fix this, we can give the span element a display set to inline-table and give that a vertical-align set to 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>

这篇关于将项目符号点与< li>的中心对齐元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！