CODEWITHSUNDEEP
htmlcssvertical-alignment
Neel Basu
Neel Basu

Reputation: 12904

vertical-align middle not working on table-cell

Please Check http://jsfiddle.net/4Ly4B/ I've vertical-align: middle on a table-cell which is not coming to the middle

Upvotes: 4

Views: 3029

Answers (3)

phpguest
phpguest

Reputation: 804

The property vertical-align doesn't work with min-height. Remove min-height and add padding instead of it.

.message{
    background-color: gray;
    position: absolute;
    padding-top: 40px;
    padding-bottom: 40px;
    min-width: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Upvotes: 0

user962293
user962293

Reputation:

vertical-align: middle; it's basicall used for table-cell.in your example position is absolute this way u can do this

.message{
background-color: gray;
position: absolute;
min-width: 200px;
display: table-cell;
padding:60px 0px 60px 0px;
text-align: center;

}

Upvotes: 0

Rob W
Rob W

Reputation: 349002

An element with display:table-cell ignores min-width and min-height. You have to use height and width instead.
Also, if you want to position the element using position:absolute, you wrap the element in a container, and assign position:absolute to this container.

See this fiddle: http://jsfiddle.net/4Ly4B/3/

Upvotes: 2

Related Questions