html - 将元素符号点与 元素的中心对齐

Question

在下面的代码片段中，我试图显示一个无序列表，其中的元素符号点为 font-size。大于关联的 <li>元素。但是，在第二个元素的情况下，元素符号点与图像的上 Angular 对齐。有没有办法改变它以强制元素符号点与 <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="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/phone-512.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="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/phone-512.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>