Align bullet point with the center of <li> elements

Question

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

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

It is better to use background image in this case.

 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>