Vertical and Horizontal Alignment of Text in a DIV

Posted: 27 June 2009 08:13 PM

[ Ignore ]

Grad Student

Total Posts: 40

Joined 09-11-2007

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!

Signature

ExpressionEngine 1.6.7 Build: 20090515

Profile

vosSavant

Posted: 28 June 2009 10:11 PM

[ Ignore ] [ # 1 ]

Lab Assistant

Total Posts: 282

Joined 06-15-2008

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.

Signature

RYAN BURNEY • Lead Web Developer, 3 Roads Media
Denver based web and graphic design

Profile

ender

Posted: 29 June 2009 08:07 AM

[ Ignore ] [ # 2 ]

Lab Technician

Total Posts: 1215

Joined 12-18-2008

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.

Signature

EE Pro Network
eMarketSouth - web design & development, SEO, video production, and more
ExpressionEngine consulting services - complex SQL queries, .htaccess url rewriting, custom plugins/modules/extensions, template optimization, javascript/jQuery enhancements, and more!
Skype: tywangsness

Profile

Everett

Posted: 29 June 2009 03:33 PM

[ Ignore ] [ # 3 ]

Grad Student

Total Posts: 40

Joined 09-11-2007

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.

Signature

ExpressionEngine 1.6.7 Build: 20090515

Profile

bmschaaf

Posted: 01 July 2009 08:19 PM

[ Ignore ] [ # 4 ]

Lab Assistant

Total Posts: 147

Joined 12-29-2008

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

<html>
<head>
<title>Vertical Align</title>

<style type="text/css">
body {margin:0;padding:0;}
#main {height:400px;width:400px; position:relative;}
#sub {margin:auto 0; position:absolute; top:0; bottom:0; height:50px;}
p {text-align:center;}
</style>

</head>
<body>
    
    <div id="main">
        <div id="sub">
            <p>Some Text. Lorem impsum...blah blah. Text. Lorem impsum...blah blah. Text. Lorem impsum...blah blah</p>
        </div>
    </div>
</body>
</html> 

Signature

Ben Schaaf
Snowfox Design + Development

Profile

Everett

Posted: 02 July 2009 11:44 PM

[ Ignore ] [ # 5 ]

Grad Student

Total Posts: 40

Joined 09-11-2007

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

Signature

ExpressionEngine 1.6.7 Build: 20090515

Profile

‹‹ CSS Help with Core Edition how to add 5-star rating to comments? ››

Username		Remember Me?
Password		forgot password?

Post Marker Legend
	New posts	Hot Topic with new posts	New Poll	Moved Topic	Sticky topic
	No new posts	Hot Topic with no new posts	Old Poll	Closed Topic	Announcements

Visitor Statistics
The most visitors ever was 1743, on December 02, 2009 03:47 PM
Total Registered Members:	120629	Total Logged-in Users:	115
Total Topics:	126660	Total Anonymous Users:	58
Total Replies:	665800	Total Guests:	529
Total Posts:	792460