Wrong vertical align of text in Google Chrome browser

Question

I have problem with creating "button" element (text in inline-block container with border), because in some font-size text has wrong vertical-align (is not perfect middle).

I want to use Raleway (Google Web Font) and Bootstrap. Height of the text container is set by line-height.

I am testing it on Windows 7...

on Firefox (ver. 36) everything is perfect

but the problem is on Google Chrome (ver. 41)

Live preview: http://biznes-dynamit.pl/test/marcin-dobroszek/font/

Part of CSS code:

/*Bootstrap default style*/
* {
    box-sizing: border-box;
}
.btn {
    display: inline-block;
    vertical-align: middle;
}

/*custom style*/
body {
    font-family: "Raleway";
}
.btn {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 16px;
    font-size: 11px; /*real height: 8*/
}
.btn-sm {
    font-size: 10px; /*real height: 7*/
    line-height: 15px;
 }
.btn-lg {
    font-size: 12px; /*real height: 8-9*/
    line-height: 16px; /*light, normal*/
 }

---

As you can see in Chrome preview in some font-size and font-weight text is go up relative container.

3x zoom sample, with font-size: 11px (line-height: 16px) and font-weight: semi-bold.

Top and bottom space (between text and top/bottom border) should be the same: 4px, but as you can see top space has 3px and bottom has 5px.

Is it possible to fix this browser issue?

Clientele

I am experiencing the same problem in one project, very annoying. – Denouement

Answer 1

This very annoying problem is caused by chrome not taking text-transform: uppercase into account. Use the following to get correct centering in Chrome with all-caps text:

text-transform: lowercase;
font-variant: small-caps;

Fiddle: http://jsfiddle.net/fyvyB/76/

Works great for buttons, for other usecases you might have problems with the text being small-caps and not real caps.

Mcmahon

Answer 2

I encountered the same problem, but with Nimbus Sans instead of Raleway. I was able to resolve it by using @font-face and setting ascent-override: 100% when loading the font.

Here is an example that is vertically centered on Firefox v126, but not centered on Chromium v125:

#wrapper {
  height: 128px;
  display: flex;
  margin: .5em;

  /* monospace generic font family so it's obvious if the main font isn't used */
  font-family: "Nimbus Sans", monospace;
}

div div {
  padding: .5em;
  display: flex;
  align-items: center;
  background-color: #f55;
}

span {
  font-size: 4rem;
  border: 1px solid;
}

<div id="wrapper">
  <div><span>Text</span></div>
</div>

By explicitly overriding the ascent-override property, we now get consistent results between both Firefox and Chromium:

/* Fix inconsistent ascent across browsers. */
@font-face {
  font-family: "Nimbus Sans";
  src: local("Nimbus Sans");
  ascent-override: 100%;
}

#wrapper {
  height: 128px;
  display: flex;
  margin: .5em;

  /* monospace generic font family so it's obvious if the main font isn't used */
  font-family: "Nimbus Sans", monospace;
}

div div {
  padding: .5em;
  display: flex;
  align-items: center;
  background-color: #f55;
}

span {
  font-size: 4rem;
  border: 1px solid;
}

<div id="wrapper">
  <div><span>Text</span></div>
</div>

Wrist

Answer 3

Had a similar issue with a custom font. After some playing around and trying all different display properties on the text element, I noticed that the vertical align issue only affected text elements whose parent was display: block;, despite said text element being set to display: inline;. I resolved the problem by changing parents to display: table; and the child text elem to display: inline;, e.g. below... I can't explain why this worked, but posting here in case it helps others...

<style>
  div {
    display: table;
  }
  span {
    display: inline;
    padding: 5px 10px; /* to make v-alignment clearer */
  }
</style>
<div>
  <span>Some text here</span>
</div>

Leibowitz