CodingForums.com - View Single Post

Sammy12 · 09-17-2012, 12:07 AM

You're talking about vertically centering multiple lines of text? I am assuming it is already centered horizontally with text-align: center.

Code:

#content-right {
	float: right;
	width: 280px;
	text-align: center;
}

Couldn't find a previous post where I explained this, but for vertically centering multiple lines of text, you would use:

Code:

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

Code:

<div class="center-container">
    <div class="center"></div>
</div>

http://www.vanseodesign.com/css/vertical-centering/

It doesn't work in IE6 & 7, there are backups explained in the article, but I honestly wouldn't bother supporting them for such a little thing as centering.

09-17-2012, 12:07 AM	PM User \| #2
Sammy12 Registered User Join Date: Jun 2011 Posts: 1,063 Thanks: 12 Thanked 241 Times in 240 Posts	You're talking about vertically centering multiple lines of text? I am assuming it is already centered horizontally with `text-align: center`. Code: #content-right { float: right; width: 280px; `text-align: center;` } Couldn't find a previous post where I explained this, but for vertically centering multiple lines of text, you would use: Code: .center-container { display: table; } .center { display: table-cell; vertical-align: middle; } Code: <div class="center-container"> <div class="center"></div> </div> http://www.vanseodesign.com/css/vertical-centering/ It doesn't work in IE6 & 7, there are backups explained in the article, but I honestly wouldn't bother supporting them for such a little thing as centering. Last edited by Sammy12; 09-17-2012 at 12:13 AM..