I have a random quote that appears in a div. The text of the quote is inside a span tag. I need to vertical align the text so that it's between the top and bottom of the inner div, so I used "vertical-align: middle;" on the span, but it had no effect. So now I'm lost. I can't use regular spacing because the text is a different length with every page load. The website is here: http://illogicalmind.com (very, very unfinished design.) It's in the right sidebar with the orange background and most likely a picture of a character or person. Any help is much appreciated.
That's funny, I have the same problem and asked the same question yesterday: Vertical Align for Text inside a Div in Css It looks like there is no "working" solution at the moment
Ah, I guess I should've done a search, then. Either way, this is tough because I've done everything seemingly right. Maybe it is just a CSS problem...
It's an IE issue. CSS allows what you want with no problem (but you're both mis-understanding how vertical-align works). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ /*modern browsers can use css*/ #container { border: 1px solid black; display: table-cell; height: 250px; vertical-align: middle; width: 320px; } /*common content*/ blockquote { background-color: #eee; text-align: center; width: 160px; margin: 0 1em; } /*IE method--could use css, but that would depend on yet another IE bug. A single-celled table is a sane work-around for a crappy browser*/ table { border: 1px solid black; margin-top: 1em; /*added for clarity*/ width: 320px; } td { height: 250px; vertical-align: middle; } /*]]>*/ </style> </head> <body> <div id="container"> <blockquote> <p>now is the time for all good men to come to the aid of their party</p> </blockquote> </div> <table summary=""> <tbody> <tr> <td> <blockquote> <p>now is the time for all good men to come to the aid of their party</p> </blockquote> </td> </tr> </tbody> </table> </body> </html> Code (markup): I'm too tired to mess with a css fix for IE tonight. :shrug: cheers, gary
I think I misunderstood muncle's first post too-- loose text sitting in a div is easier to vertical-align than say another block with text (like, a p), or if this text was in something inline like a span. Vertical-align works with inline elements-- for instance, aligning an img (naturally an inline element) inside the text of a p (the p is a block but the text inside is made up of "anonymous inline boxes", so, inlines can be aligned with inlines. <p>stuff stuff more stuff <img src="stuff.gif" ... ...> more stuff </p> Vertical-align can align this image with the text, in all browsers. If you are vertical-aligning a block inside a block, that's different. You really should try one of the double-container tricks of Paul. Only thing is his examples are simple, the thing being aligned aligns in an empty page... it's a little different in a page full of stuff, but can be done-- it just takes more code than we would want (CSS, being all great and wonderful, should allow us to vertically center as easily as we horizontally center). http://www.pmob.co.uk/pob/hoz-vert-center.htm Now, I wouldn't bother hiding things from IE-Mac, nor would I bother with IE5.5 and below, both of which would reduce the CSS you see there. Also, I would not do the IE conditional comments unless this was only appearing on a single page-- your CSS should be in an external sheet, which Paul doesn't do here because these are example pages and he wants you to easily see the CSS. Instead, you may have to bloat your CSS instead of the HTML with * html and *+html statements in place of the [!if IE] stuff. IE7 otherwise generally acts like a modern browser but it cannot deal with display: table display: table-row display: table-cell though IE8 I hear will. There's nothing wrong with having display: table stuff for smart browsers and some garbage for IE... we've always had to have a bit of garbage for IE anyway. The thing that always gets me is that second, inner container. I hate that. I don't need a second container to horizontally center something (the body gets to be my width'd parent container automagically, right?), why should I need one for vertical centering?? Gah. You could also use conditional comments to make the table part, in the HTML, and then the table CSS only does anything in IE while display: table-cell is used by the smart browsers: <div id="container"> <!--[if lte IE7]><table id="textwrapper"><tr><td><![endif]--> <all the textitty text text you want centered> <!--[if lte IE7]></td></tr></table><![endif]--> </div><!--container--> Any CSS for the table with the id of "textwrapper" is dealt with by IE version 7 and under (since we don't want IE8 to see this whenever it comes out, assuming it's a compliant browser when that happens). Use the normal table vertical-align in the CSS. Use Gary's display: table-cell for the centering for all other browsers and hopefully IE8. Those browsers will only see <div id="container"> <all the textitty text you want centered> </div>