How to vertically align text in a browser-independent way?

Question

Context:

I'm trying to use CSS to display playing cards for a game I'm designing on my free time

What I'm trying to do, specifically:

Nothing revolutionary, there's a place on my cards in which I need to write some text, and I want to center the text so that it looks good

What I did:

The relevant part of the HTML is simply this:

<div class = "card_header">
    <div class = "card_cost">1</div>
</div>

And the relevant CSS:

.card_header {
    position: relative;
    top: 110px;

    box-sizing: border-box;
    width: 100%;
    height: 75px;
}

.card_cost {
    position: absolute;
    top: 50%;
    right: 165px;
    transform: translateY(-50%);

    font-size: 60px;
    font-weight: bold;
}

What's the problem:

I expected the card_cost text to be vertically centered between the top and bottom borders of the card_header, but under the browser I was using (Firefox), the text was a bit too high. I tried to fix this by using top: calc(50% + 4px);, which looks like this (a bit better):

Since it felt a bit too tweaky for my taste, I went and checked how it looked like under another browser (Safari) to see whether it looked the same, and it looks like this:

which is the opposite problem: the text is too low.

I've tried adding border: 1px dotted gray; to get a better idea of what's happening, and here's what I see (safari on the left, firefox on the right):

The text seems to be vertically centered within card_cost in Safari (which means it would probably get centered properly if I simply used top: 50%; as I originally did), but in Firefox the box seems to be bigger and text way-high within the box.

What exactly is going on here? Why is this behaving differently depending on the browser? Is there a way to make this render the same? Or, more broadly, is there any browser-independent way for me to make the text vertically centered here?

Edit:

Since someone mentioned line-height in the comments, here's what it looks like when I add line-height: 1; for card_cost (again, Safari on the left and Firefox on the right):

With this, the text doesn't seem as centered as before under Safari, and it's even more clear that the text is way-high under Firefox

It looks like the browsers are using different line-heights. Try setting the line-height manually. — Mr Lister, May 18 '20 at 18:12
@MrLister It's something I had already tried, but you're right to mention it. I made an edit to add the related screenshots — Eternal, May 18 '20 at 18:26

Justinas · Answer 1 · 2020-05-18T20:02:00.390

1

I usually take approach with invincible :before on parent with 100% of height and vertical-align: middle;. That way this :before justifies other inline-block content:

// I would apply this style everywhere
.card_header,
.card_header * {
  font-family: arial;
  box-sizing: border-box;
}

.card_header {
  position: relative;
  top: 110px;
  width: 100%;
  height: 75px;
  text-align: center;
  background-color: rgba(100, 0, 0, .1);
}

.card_header:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid blue;
}

.card_cost {
  display: inline-block;
  font-size: 60px;
  height: 60px;
  font-weight: bold;
  vertical-align: middle;
  background-color: rgba(0, 0, 100, .1);
}

<div class="card_header">
  <div class="card_cost">1</div>
</div>

edited May 18 '20 at 20:02

answered May 18 '20 at 18:40

Justinas

41,402
5
66
96

I'm not sure what this supposed to do, but when I run the snippet (under Firefox), the 1 isn't vertically centered properly – Eternal May 18 '20 at 18:52
@Eternal Oh, I got it.... You want to align font glyph, not box of text element. It actually will depend on font that you will use (inspect my example, and you will see that this `1` has space around it) – Justinas May 18 '20 at 19:45
Holy cow you're right, that is the issue. I thought I had that covered because I had explicitly declared `font-family: Times, serif;` on the parent `card` div. Turns out that adding "Times New Roman" as the first font changes the display, and now it finally looks the same on Firefox and Safari, so it totally was the issue. Can you put that in your answer so that I can upvote you and stuff? – Eternal May 18 '20 at 20:39

How to vertically align text in a browser-independent way?

1 Answers1