CODEWITHSUNDEEP
androidhtmlcssmobilecentering
Ryan Peschel
Ryan Peschel

Reputation: 11996

Vertically center in div differs on mobile vs desktop?

I've been trying to center a number inside of a circle, and I just can't quite get it. Every time I think I have it, it seems like it on some platform it doesn't work (whether it's an apple phone, an android browser, Safari on Mac OS X, or Chrome / Firefox on Windows) there's a 1-2 pixel difference.

Here's the code:

.unread-replies {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    background-color: #F24648;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-weight: 500;
    color: white;
    font-size: 17px;
    border: 1px solid #00000066;
}

* {
    box-sizing: inherit;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
<div class="unread-replies">1</div>

Fiddle copy here: https://jsfiddle.net/3vr2mkfb/3/

In this case it seems like it's not vertically centered on Chrome in my desktop browser, but it is vertically centered on Chrome on my Android phone. Why the discrepancy?

If I try small hacks like padding-bottom: 2px; then it inevitably causes some problem on some other platform. I think I instead need the actual fix, but I don't know if there is one?

Upvotes: 0

Views: 364

Answers (2)

Romain BOBOE
Romain BOBOE

Reputation: 377

add some line-height with the same value as the font-size and see if it fixe anything.

Upvotes: 1

s1834
s1834

Reputation: 443

Use Viewport Units like vw for width and vh for height instead of px and % because it will help you make your webpage/website responsive.

It will surely solve your issue but if it doesn't let me know in the coments I will try my best to help you.

Upvotes: 0

Related Questions