Home/ Questions/Q 7527467
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T04:06:47+00:00

My aim is have the text inside this div displaying in the middle of

  • 0

My aim is have the text inside this div displaying in the middle of it’s container cross-browser.

If I could achieve this it would enable me to use fewer images.

http://jsfiddle.net/tMFaD/

Notice how this example looks different in Chrome/Safari and Firefox. The issue seems obviously related to the type/line-height/similar (the ‘1’ is higher up on firefox).

Can this be easily done?

UPDATE: This is the small difference that i’m trying to solve: http://cl.ly/2A2o371c2O2r3q0T0R2E

UPDATE 2: I have not found a definitive cross-browser solution but some of the answers in this thread should come close enough for most. The solution I used was to use a browser-targeted rule for this element. I could also have used images/sprites.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could set line-height to match the height of the box and then remove the top and bottom padding. That will align it in the (vertical) middle of the box.

    • 0