Working on my first CSS layout has been humbling! There’s lots to learn. I’d like to vertically and horizontally align text in a DIV. Some of the text will need to wrap to a second line.  Any suggestions? Or links to a tutorial?  Thanks!

Everett,

You can use the text-align property in CSS to get your text the way you want it (try values of “left,” “right,” and “center”).

There is a vertical-align property, but it’s buggy in IE and Firefox and (I think) only works in tables. Read more about it at the Sitepoint CSS Reference. Vertical alignment is really only useful if you’re working inside a table, in my opinion.

You could set the display of your DIV to “inline” to try and get vertical-align to work, but (if I remember correctly) then your text-align wouldn’t work.

When I need to vertically position text, I usually set the text I want to position as a block level element and add some margin or padding to the top.

yeah vertical-align is hard to use properly. if you can’t use top/bottom padding or line height to center what you want (doesn’t work well with variable height content), then you’re pretty much stuck using a single row/column table.

Thanks for the info! The Sitepoint CSS Reference was helpful. It had the most up-to-date notes on browser compatibility that I have seen. I decided to go with a table with a single column; it seems to be the best choice for this situation.

If you know the height of the div you want to center vertically, you can do this…

Absolute positioning inside relative positioning? I would have never thought to have tried that. Interesting!