CODEWITHSUNDEEP
cssfirefoxgoogle-chromecross-browservertical-alignment
AppleGrew
AppleGrew

Reputation: 9570

How to vertically align text across browsers

Please note that I have been through the existing links on this topic and none seem to help in my case.

All suggest a way of how to move the text vertically so that it appears aligned. The problem in my case is that it is already aligned in Chrome, so when I try to align the text for Firefox then it misaligns the text in Chrome.

Please open the following link in Firefox (v12) and Chrome (v19).

http://jsfiddle.net/UQ4D5/

You will notice that it is shifted towards the top in Firefox but is perfectly aligned in Chrome.

Upvotes: 4

Views: 19855

Answers (3)

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

Learn to use reset.css or normalize.css for prevent small differences in browser rendering models.

And then use height=line-height trick:

div {
    font-size: 100px;
    text-align: center;
    height: 120px;
    line-height: 120px;
    border: 1px solid black;
}

chrome metrics:
enter image description here
firefox metrics:
enter image description here

Height is the same in both cases.

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Two properties in your css 

 display: table-cell;
    vertical-align: middle;

Check to live demo http://jsfiddle.net/UQ4D5/5/

Upvotes: 4

gearsdigital
gearsdigital

Reputation: 14205

The issue is based on the Browser default Stylesheets. I recommend you to use a proper reset Stylesheet or even normalize.css

Upvotes: 0

Related Questions