vertical alignment

[Spartaco]

Hi, this is a big problem for me I can't solve it: I have a <div>, and I
want the content of this div be vertically aligned in the middle by applying
CSS styles to the div tag... I've tried the vertical-align but it does not
work, the content is always at the top.

Please help.

Best regards

 

[Ben C]

Hi, this is a big problem for me I can't solve it: I have a <div>, and I
want the content of this div be vertically aligned in the middle by applying
CSS styles to the div tag... I've tried the vertical-align but it does not
work, the content is always at the top.

vertical-align aligns the inline contents of the div with respect to the
lines they're on, not with respect to the total height of the div.

You could set line-height on the div to the div's own height, but if the
lines break you will get an unwanted effect.

Your best option may be to use a table cell instead of a div (or apply
display: table-cell to the div). vertical-align on a table cell means
what you expect.

 

[mardi]

Hi, this is a big problem for me I can't solve it: I have a <div>, and I
want the content of this div be vertically aligned in the middle by
applying CSS styles to the div tag... I've tried the vertical-align but
it does not work, the content is always at the top.

Hi, I am but a humble student of the css-fu. I had the same issue arise in
my studies and I did this:

div.container { top: 0; left: 0; width: 100%; height: 100%; position:
fixed; display: table }

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

then:

<div class="container">
<div class="cell">
<p>My Content</p>
</div></div>

This works for vertical alignment in the latest versions of Firefox (I
tried it in Linux and MS), Opera (Linux) and Konqueror (obvious ) but it
does not seem to work in IE 6 & 7.

 

[Blinky the Shark]

Hi, I am but a humble student of the css-fu. I had the same issue arise in
my studies and I did this:

div.container { top: 0; left: 0; width: 100%; height: 100%; position:
fixed; display: table }

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

then:

<div class="container">
<div class="cell">
<p>My Content</p>
</div></div>

This works for vertical alignment in the latest versions of Firefox (I
tried it in Linux and MS), Opera (Linux) and Konqueror (obvious ) but it
does not seem to work in IE 6 & 7.

I don't know anything about this site, but your findings seem to agree
with how it lists display:table:

http://www.quirksmode.org/css/display.html

 

[mardi]

I don't know anything about this site, but your findings seem to agree
with how it lists display:table:

http://www.quirksmode.org/css/display.html

Hi, thanks for the link, good info. I should have put in my original post
that I found the code here:

http://www.w3.org/Style/Examples/007/center.html

 

[Blinky the Shark]

Hi, thanks for the link, good info. I should have put in my original post

I just found that site today, in fact, doing some homework on the
display:table stlye. Looked like a good resource -- most of such sites
I've seen haven't made it past IE4 or so.

 

[Neredbojias]

Hi, thanks for the link, good info. I should have put in my original
post that I found the code here:

http://www.w3.org/Style/Examples/007/center.html

Re. above link, neither one of the examples work in IE 6.

 

[mardi]

Re. above link, neither one of the examples work in IE 6.

wow... really?