CODEWITHSUNDEEP
htmlcssvertical-alignment
JD Audi
JD Audi

Reputation: 1055

Cant vertically align text!

I know its extremely simple, but I have been coding all day and it doesn't seem to work.

I want the text to be vertically centered inside the box.. What am i doing doing?

http://jsfiddle.net/UAyNh/

UPDATE: That worked for the text, but the buttons wont center. Check it out on Safari vs. Chrome. http://jsfiddle.net/Bz9pB/

Upvotes: 0

Views: 268

Answers (3)

Arjan
Arjan

Reputation: 9874

If the text will be on one line and the height of that line is similar to that in your example, you can solve it by setting the line-height:

height: 25px;
line-height: 25px;

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

Use line-height and make that equal to the height of the element (so long as your element only has one line, anyway):

height: 25px;
line-height: 25px;

JS Fiddle demo.

Upvotes: 1

Marty
Marty

Reputation: 39456

I give a container line-height equal to its height.

eg.

div.box
{
     line-height: 40px;
     height: 40px;
}

The only other way I know is to either use a table or replicate a table with CSS:

<div class="table">
    <div class="row">
        <div class="cell">
            text
        </div>
    </div>
</div>

And

div.table{ display: table; }
div.row{ display: table-row; }

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

Upvotes: 2

Related Questions