Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text vertical alignment issue in android and ios

I've made a site where all texts are for some pixels up in android tablet and mobile compared with desktop.

Would like to copy a small example.

Here's my html code:

<body>
      <h3>MAKING OF</h3>
</body>

Here's the css code:

body {
    text-align: center;
    padding-top: 50px;
}
html {
    font-size: 62.5%;
}
@font-face {
    font-family: MPL;
    src: local("MPL"),
    url(fonts/MPL.ttf),
    url(fonts/MPL.eot);
}
h3 {
    font-family: MPL;
    font-size: 30px;
    font-size: 3rem;
    height: 60px;
    line-height: 60px;
    padding: 0px 12px;
    background-color: #5496F2;
    color: #000;
}

May anyone know the reason why the text is not properly aligned on tablet.

Here's the screenshot of the right alignment on desktop browser enter image description here

And here's the screenshot of the issue on tablet browser enter image description here

On desktop this is working properly both in FF and Chrome, but on android tablet it's wrong aligned as on Chrome as on FF browsers, also it's not properly working on ios Safari browser. Here's the link:

http://inants.com/kadmos/web/kad/a/a

Hope someone will help to understand this issue and will suggest the best solution.

Thanks.

like image 277
Kadmos B Avatar asked Jan 23 '14 13:01

Kadmos B


People also ask

How can you vertically align the text?

Select the text that you want to center. in the Page Setup group, and then click the Layout tab. In the Vertical alignment box, click Center. In the Apply to box, click Selected text, and then click OK.

Does vertical-align work for text?

The vertical-align property works only on inline or inline-block elements and table cells and when not used on a table cell, it will affect the alignment of the element itself, not the element's contents.

What is the difference between text align and vertical-align?

valign will vertically align all elements, whereas text-align is specifically for text.

Is vertical-align deprecated?

Deprecated as an attribute Occasionally you will see “valign” used on table cells to accomplish vertical alignment. e.g. <td valign=top> . It should be noted that this attribute is deprecated and should not be used.


1 Answers

Have faced a similar issue. Looks to be the custom-font that's causing the issue. Try replacing the custom-font with something generic such as Sans-serif. Not yet sure how to resolve the issue by using the same custom-font that's causing the issue.

like image 72
Aman K Avatar answered Oct 22 '22 11:10

Aman K