Align bullet point with the center of <li> elements

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>

Tags:

Html

Css

Recent Posts