CODEWITHSUNDEEP
cssmarkup
Mike Fielden
Mike Fielden

Reputation: 10153

Vertically centering text

Link to my jsbin

I am having a bit of unexpected trouble. I would like to vertically center the "Thing2" text. However the css property vertical-algin: middle doesn't seem to be working.

So I'd like to know 2 things:

  1. Why isn't it working?
  2. Is the way I'm doing it (by adding a main class to each then a styling class) the easiest way to do this?

Note This is just a proof of concept of an overall idea that I have. So obviously class names and ids will change.

Upvotes: 0

Views: 278

Answers (3)

Sanooj
Sanooj

Reputation: 2637

Try Using This http://jsfiddle.net/YUruZ/

Use CSS style display property table and table-cell

Upvotes: 0

magritte
magritte

Reputation: 7636

You can't vertically align text in that way, see http://www.w3.org/wiki/CSS/Properties/vertical-align

Try instead setting a line height on your container div equal to the height of the div if you just want to vertically align a single line of text.

e.g. 

.metroSmall {
    line-height: 87.5px;
}

This is a nice post detailing a few different ways of vertically aligning html elements: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

If you are only supporting the latest browsers you can also use the new table, and table-cell display styles, which support vertical alignment in the same way that tables do.

e.g.

.metroSmall {
    display: table-cell;
    vertical-align: middle;
}

Bear in mind this won't work on earlier browsers such as internet explorer 6 though.

Upvotes: 1

Galen
Galen

Reputation: 30170

The way i vertically center things is to set the line-height to the height of the container

try adding line-height: 87.5px to .about

Upvotes: 1

Related Questions