How to vertically align lower case text in mobile safari? - css

Question

With a div that has
height: 15px;
line-height: 15px;
I get these results:
what css can I use to make it v-align the text to middle regardless of its case?

Answer 1

You can also use table-cell display, which is compatible in most of the browsers versions.
You then just need to use text-align and vertical-align to make it perfectly centered.
body, html {
height: 100%;
}
body {
margin: 3rem;
}
span {
background-color: #4900CE;
color: white;
border-radius: 500px;
padding: 1rem;
min-width: 2.5rem;
text-align: center;
display: table-cell;
vertical-align: middle;
}
<span>ONE</span>
<br>
<span>one</span>
I've went ahead and tested this code in most of the iOS browsers with Browserstack. You can find all the results here (some of their hosts are broken, thus the white shots).
You can alternatively use flexbox with something like
span {
display: flex;
justify-content: center;
align-items: center;
}

Answer 2

I think your best bet would to be to work with em and ex here.
I have noticed that uppercase letters seem to be vertically centered by default. Most of the time, they have a height of around two thirds of 1em, while the height of lowercase letters is almost always exactly 1ex.
Knowing these things, you can give the lowercase letters an offset of calc(((-1em / 1.5) + 1ex) / 2), this moves the text up with half the size of the uppercase letters, and down half the size of the lowercase letters.
To be able to do this, you'll have to do some padding trickery, or simply wrap the text into another element, like a span.
Check out this Fiddle
html, body { height: 100% } *, ::before, ::after { position: relative }
.flex {
display: flex;
align-items: center;
justify-content: center;
}
.flex.sans {
font-family: sans-serif;
}
.flex div {
font-size: 17vh;
background-color: #40C;
color: white;
border-radius: 1000px;
padding: .5em 1em;
margin: .25em;
}
#media (max-width: 200vh) { .flex div { font-size: 8.5vw } }
.flex div::after {
content: '';
display: block;
position: absolute;
top: calc(50% - .5px);
left: 0;
right: 0;
height: 1px;
background-color: #FFF;
}
.flex.centered div:last-child span {
top: calc(((-1em / 1.5) + 1ex) / 2);
}
<div class="flex">
Not centered<div><span>ONE</span></div><div><span>one</span></div>
</div>
<div class="flex centered">
Centered<div><span>ONE</span></div><div><span>one</span></div>
</div>
<div class="flex sans">
Not centered<div><span>ONE</span></div><div><span>one</span></div>
</div>
<div class="flex centered sans">
Centered<div><span>ONE</span></div><div><span>one</span></div>
</div>
There's a big chance this will work right away. If it doesn't, you can try changing 1.5 to some other value like 1.4 or 1.75.

Answer 3

See below example:
.capsule{
border-radius:30px;
height:30px;
background:blue;
position: relative;
display:inline-block;
padding:0 15px;
text-align:center;
color:#fff;
font-family:Arial;
}
.capsule>span{
position:absolute;
width:100%;
left:0;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.capsule > i {
opacity:0;
}
<div class="capsule">
<span> ONE </span>
<i> ONE </i>
</div>
<hr/>
<div class="capsule">
<span> one </span>
<i> one </i>
</div>
<hr/>
<div class="capsule">
<span> TWO </span>
<i> TWO </i>
</div>
<hr/>
<div class="capsule">
<span> two </span>
<i> two </i>
</div>
This will work on all browsers except IE 8. You can see working example here.

Answer 4

What if your word would have ascenders ( the part of the letters going higher to the letter x like ftlkidhjb ) or descender (like jyqp) then the text will poke out of the edges of your button. That's why it seems not centered. The only solution to make it feel centered is to make the button as high as 2 or 3 times the line height.

Answer 5

You can use flex:
.badge {
width: 100px;
height: 50px;
border-radius: 50px;
background: blue;
color: white;
display: flex;
display: -webkit-flex; /* Safari prefix */
justify-content: center;
-webkit-justify-content: center; /* Safari prefix */
flex-direction: column;
-webkit-flex-direction: column; /* Safari prefix */
font-family: Arial;
font-size: 14px;
text-align: center;
}
.badge.large {
font-size: 24px;
}
<p>Large badge:</p>
<div class="badge large">
ONE
</div>
<p>Normal badge:</p>
<div class="badge">
two
</div>
JSFiddle

Answer 6

Here is the solution. The problem is basically font Vertical Metrics which is actually issue.
I recommend use google font if you can if not than,
Go to http://www.fontsquirrel.com/tools/webfont-generator
Note: Do not use blacklisted font. If you want, go for license.
Upload the font you want to use;
choose “EXPERT…”
Select EOT Lite if you require IE support;
In Rendering section, check “Fix Vertical Metrics”; (This is Important)
This will fix Vertical Metrics which will fix your line-height issue.
CSS Recommendation:
Use default body line-height 1.4 or 1.42857143 do not relay on line-height: normal because different browser has different default value.

Answer 7

To make lower case text aligned you have to offset it manually to compensate for the extra height that would have to be occupied by upper case text, but that would make uppercase text misaligned. You can make your divs look inline or inline-flex and then you can simply force all text in these badges to be uppercase:
.up div {
height: 15px;
line-height: 15px;
background-color: blue;
color: white;
border-radius: 500px;
padding: 0.3em 0.7em;
display: inline;
font-family: arial;
text-transform: uppercase;
}
<div class="up">
<div>ONE</div> <div>One</div> <div>one</div>
</div>
Or lowercase+offset:
.low div {
height: 15px;
line-height: 15px;
background-color: blue;
color: white;
border-radius: 500px;
padding: 0.2em 0.7em 0.4em 0.7em;
display: inline;
font-family: arial;
text-transform: lowercase;
}
<div class="low">
<div>ONE</div> <div>One</div> <div>one</div>
</div>
Here's the output on iPhone 5: