CODEWITHSUNDEEP
htmlcssvertical-alignment
user3135147
user3135147

Reputation: 17

Vertical align doesn't work, but should

I've read some articles on the internet stating that if an element is one of the following display types: inline, inline-block, or table-cell, then vertical-align should work. I created this Fiddle to check it out, but this doesn't seem true.

What are the ULTIMATE requirements that when followed, vertical-align always works? Here is my Fiddle.

Upvotes: 1

Views: 71

Answers (2)

Markus Kottländer
Markus Kottländer

Reputation: 8268

Use display: table-cell and vertical-align: bottom on the outer div:

.a1{
    height: 300px;
    background: #ccc;
    display: table-cell;
    vertical-align: bottom;
}

.a2 {
    height: 20px;
    background-color: #f00;
}

JSFiddle

Upvotes: 1

pasine
pasine

Reputation: 11543

Use relative/absolute positioning instead of vertical-align. 

.a1{
    height: 300px;
    position: relative;
    background-color: green;
}

.a2 {
    height: 20px;
    display: inline-block;
    background-color: #f00;
    vertical-align: bottom;
    position:absolute;
    bottom:0;
    left:0;
}

DEMO

Upvotes: 1

Related Questions