CODEWITHSUNDEEP
htmlcsstext-align
Neo
Neo

Reputation: 395

CSS vertical-align property doesn't work

Hey there I have the following CSS code:

.parent
{
    position : 'absolute';
    top : '50px';
    left : '50px';
    width : '400px';
    height : '160px';
    padding : '10px';
    border : '2px solid';
    border-color : '#444444';
    background-color : '#FF0000';
    text-align : 'center';
    /*display : inline; tried this also and didn't work.*/
}

.child
{
    color : '#123456';
    font-size : '16px';
    font-family : 'Arial';
    vertical-align : 'middle';
}

I just want to put the child's content in the center (x and y) of the parent div, but it's not working, it only shows me the text in the top side of the parent element. Any suggestion? thank you.

Upvotes: 5

Views: 18430

Answers (3)

user2277872
user2277872

Reputation: 2973

Take whatever the width is, which in this case is 400, and divide by 2 for half of the div. Then take half of the height 160, and divide by 2 for half the height, and you should get the center.

Upvotes: 2

C3P-Bro
C3P-Bro

Reputation: 23

Lose the quotes in your CSS property values and add line-height: 160px; to .parent

Upvotes: 2

Blender
Blender

Reputation: 298056

vertical-align has a deceiving name. It doesn't actually vertically align elements in the way that you think it does.

If your child has only one line of text, you can use the line-height trick to center it:

.parent {
    line-height: 160px; /* Height of the parent */
}

Demo: http://jsfiddle.net/vVAdZ/

Another way is to fake a table:

.parent {
    display: table;
}

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

Demo: http://jsfiddle.net/vVAdZ/3/

Upvotes: 15

Related Questions