CODEWITHSUNDEEP
htmlcss
Aserre
Aserre

Reputation: 5062

Align bullet point with the center of <li> elements

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>

Upvotes: 6

Views: 5450

Answers (2)

Avinash
Avinash

Reputation: 146

I've spent half a day doing the same but it didn't work out. Finally, replacing bullet icon with image worked like charm. To do that, hide default bullet icon by making list-style as none. Then use a bullet image to replace that. Here's a working example:

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>

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

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>

Upvotes: 8

Related Questions