Search code examples
cssmobile-safari

How to vertically align lower case text in mobile safari?

With a div that has 

height: 15px;
line-height: 15px;

I get these results:

enter image description here enter image description here

what css can I use to make it v-align the text to middle regardless of its case?

Solution

  • 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;
}