将项目符号点与中心对齐<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="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>

Answer 2

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

 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; }

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