CODEWITHSUNDEEP
css
curiosity5678
curiosity5678

Reputation: 165

How can I tweak text's vertical alignment to correct for a font's misalignment?

Lets say I have a font that's incorrectly centered vertically so that even with these styles Example 1 and 2 render above the center of the element:

div {
  padding: 0.1in;
  background-color: #6C6ECC;
  color: white;
  margin: 0.1in;
  text-align: center;
  font-family:Arial;
}

.tweak {
  vertical-align:-0.1in;
}
<div class="basis">EXAMPLE 1</div>
<div class="tweak">EXAMPLE 2</div>

In this example, they're both properly centered, but my goal is for Example 2's text to be below the vertical center of the element, while everything else about the elements remains visually the same. I want to correct a font's incorrect vertical alignment (the font just naturally renders off-center, above the center of normal text lines).

Upvotes: 0

Views: 257

Answers (1)

Christoph
Christoph

Reputation: 1630

If you know the text will be just one line, you can use a combination of height and line-height. Otherwise you will need something like position: relative; top: -4px (but that would move the colored background in your example as well, so you'd need a wrapping element)

div {
  padding: 0.1in;
  background-color: #6C6ECC;
  color: white;
  margin: 0.1in;
  text-align: center;
  font-family:Arial;
}

.tweak {
  height: 1em;
  line-height: 1.6em;
}
.tweak2 {
  height: 1em;
  line-height: 0.8em;
}
<div class="basis">EXAMPLE 1</div>
<div class="tweak">EXAMPLE 2</div>
<div class="tweak2">EXAMPLE 3</div>

Upvotes: 1

Related Questions