0

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?

clime
  • 8,695
  • 10
  • 61
  • 82

1 Answers1

1

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

  • I am trying to get some understanding about vertical-align. I didn't know it applies only with respect to its siblings. – clime Feb 11 '14 at 20:25
  • @clime see the last fiddle in my updated answer: I guess that is what you want –  Feb 11 '14 at 20:30
  • I wanted to get just the understanding, which I have got. but thanks for updates. – clime Feb 11 '14 at 20:36