CODEWITHSUNDEEP
cssvertical-alignment
clime
clime

Reputation: 8885

vertical-align: why it does not work for me?

Here is html:

<div style="height: 100px">
    <span style="vertical-align:top;">top</span>
    <span style="vertical-align:bottom;">bottom</span>
</div>

http://jsfiddle.net/CaS5r/1/

Why vertical-align property does not work in this example? Do I use it incorrectly?

Upvotes: 0

Views: 117

Answers (1)

user950658
user950658

Reputation:

I'm unsure what you want to achieve.

See this fiddle: http://jsfiddle.net/CaS5r/4/

It does work, but it only aligns to it's siblings.

some debugging

span {
    outline: 1px solid red;
}
div {
    background: yellow;
    height: 100px;
}
HTML 
<div >
    <span style="vertical-align:top;">top</span>
    <span style="vertical-align:middle;">middle</span>
    <span style="vertical-align:baseline;">baseline</span>
    <span style="vertical-align:bottom;">bottom</span>
</div>

UPDATE

you can see it better if the font is bigger (e.g. 50px) http://jsfiddle.net/CaS5r/5/

UPDATE

You probably want to use display: table;

http://jsfiddle.net/CaS5r/7/

Then it does what you expect

Upvotes: 1

Related Questions