Text vertically not center in any tag

Question

I'm using the font Calibre and the font is not aligned with any tags such as button, p, etc.

I played with height and nothing worked. Any idea what could be the reason for this?

Let em know if you need any other details

Code:

button{
 font-family: 'Calibre';
 font-size: 14px;
 padding: 5px 10px;
 background: green;
}

 <button>Sign Up</button>

There's no other code or css in this codebase. I just started a fresh project and this is the only code I wrote there.

PS: This is not a duplicate of any other question.

Possible duplicate of [How do I vertically center text with CSS?](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) — Daniel Beck, Apr 19 '19 at 18:08
It's not a duplicate of that question. It is an entirely different issue. See the selection of the text. It is not vertically aligned in the selection. The text is aligned vertically center for the button. But not for the text selection area and hence causing misalignment. — user1012181, Apr 19 '19 at 18:19
@DanielBeck This is not a duplicate question. It's an entirely different question. — user1012181, Apr 19 '19 at 18:22
@user1012181 I doubt that is the related CSS as in the snippet the button doesn't look the same color and shape wise. — SuperDJ, Apr 19 '19 at 19:00
Try the flexbox-based answer in the linked potential duplicate: I've had luck with using that in correcting font-specific misalignment, even in cases where line-height doesn't work. — Daniel Beck, Apr 19 '19 at 19:09
the is a font issue, we cannot control the selection area. The font is made like that. So either use another font, contact the font developer or consider hacks with line-height/padding until you get the needed behavior — Temani Afif, Apr 19 '19 at 19:26

score 0 · Answer 1 · answered Apr 19 '19 at 18:10

Ah, don't we love CSS?

if your HTML is like this: <button><span>Sign Up</span></button>

Try messing with the styling of the inner text element (<span>) with vertical-align: middle, align: center, and maybe add some padding like padding-top: 5px. You could also change line-height: 80% to close up that 'gap' of extra space below the characters within it's area.

score 0 · Answer 2 · answered Apr 19 '19 at 18:15

0

Center text vertically within a button with flex:

<button class="btn"> Text </button>

.btn {
    display: flex;
    align-items: center;
}

For inline/inline-block elements, they might have vertical-align values that are different from the text.

answered Apr 19 '19 at 18:15

Andu Andrici

853
1
5
12

Text vertically not center in any tag

2 Answers2