Align bullet point with the center of <li> elements

Issue

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>

Solution

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>

Answered By - James Donnelly