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

Question

在下面的代码片段中，我试图显示一个带有比相关的<li>元素更大的font-size的无序列表。然而，在第二个元素的情况下，项目符号与图像的上角对齐。是否有一种方法可以强制项目符号与<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>

- Aserre

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>

- James Donnelly

Answer 2

我花了半天时间做同样的事情，但没有成功。最后，用图像替换了项目符号，效果非常好。要做到这一点，可以通过将list-style设置为none来隐藏默认的项目符号。然后使用一个项目图像来替换它。下面是一个可行的示例：

ul {
    list-style: none;
    padding-left: 0;
    padding-top: 12px;
}

ul li {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="red" /></svg>'); /* replace this with bullet image of your choice */
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding-left: 24px;
    background-size: 16px 16px; /* adjust this for adjusting bullet size */
    margin-left: 16px;
}

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

- Avinash