homepage Welcome to WebmasterWorld Guest from 107.22.141.14
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Vertical Center with CSS
vertical-align revisited..
SuzyUK




msg:3350568
 1:53 pm on May 26, 2007 (gmt 0)

Having been inspired while reading about a new (to me) method about vertical align & internet explorer [webmasterworld.com]. I've decided to try and summarise the better known ways to achieve this along with the pros and cons of each. If after reading this you can add more methods for discussion, that would be fabulous!

Probably the best known:

Dead Centre
This method was written about a long time ago by WPDFD [wpdfd.com] . This works very well on the surface IF you know the dimensions of both the containing element and its content, in fact it works better now that it did when it was written because Opera fixed themselves!

The idea is to use Relative/Absolute Positioning & percentages to their fullest.

  • 1. Outer Div becomes the container and if not the body it would need position: relative on it
  • 2. the element to be centered has height/width dimensions and is then positioned absolutely 50% from the top and the left of the body/wrapper
  • 3. the element to be centered is then given negative top/left margins equal to half it's height/width

Example #1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; height: 100%;}
body {font: 14px/1.7 Verdana, Geneva, Arial, sans-serif;}
#wrap {
position: relative;
width: 500px;
height: 100%;
margin: 0 auto;
background: #ffc;
}
#content {
background: #abc;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
height: 100px;
margin-top: -50px;
width: 250px;
margin-left: -125px;
}
#content span {font-weight: bold;font-size: 24px}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<p>This text is<br><span>DEAD CENTRE</span><br>and stays there!</p>
</div>
</div>
</body>
</html>

for: This is nice and easy when everything is measured just so. You need to know the containers height as well as the elements height.

against: The text that says it's centered is not really! try amending the font size or line-height. The (blue) #content div is the one that's centered and it will overflow when more content is added or font-size is increased.


Vertical Centering in CSS
based on method by: jakpsatweb

this one is gaining traction, but IE7's better compatibility has confused jakpsatweb's sample.

The thought behind this is quite clever however the use of hacks (for forward compatibility) is it's downfall, as it stands on the sample page, the [id] attribute selector that is used is now read by IE and its specificity (on the #middle position static rule) is overruling the necessary position absolute for IE7.

The method still works OK as long as you think about it as 2 x different methods for 2 x different browsers. and split the CSS some other way than that forward compatible hack.

It uses table properties for those browsers that understand them and a positioning method for IE.

example: #2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<title>Vertical Center Solution</title>
<style type="text/css" media="screen">
#outer {display: table; height: 200px; width: 100%;}
#middle {display: table-cell; vertical-align: middle; width: 100%;}
.border {border: 1px solid green;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#outer {position: relative;}
#middle {position: absolute; top: 50%;}
#inner {position: relative; top: -50%; }
</style>
<![endif]-->
</head>
<body>
<h1>Vertical Centering in CSS - Example</h1>
<div id="outer" class="border">
<div id="middle">
<div id="inner" class="border">
any text<br>any height<br> any content, for example generated from DB<br> everything is vertically centered
</div>
</div>
</div>
</body>
</html>

This works well when you don't know the exact height of the content that will be generated. BUT is only perfect in those browsers that use the table properties because as soon as the content exceeds the height of the containing (#outer) element IE will not stretch but instead overflows the container.

The browsers that use the table properties will expand the container 'table' so this method works nicely for auto-generated content as it will treat the height like min-height.

In IE if the content generated is too tall for the outer container then the content will overflow the container, both top and bottom, overlapping content above and below it, you can compensate for that by adding overflow: hidden to #outer for IE.

This does restrict this method to you to having to know at least one approximate height that's involved.


Vertical Alignment for IE in CSS
based on method by: Bruno Fassino
ref: this thread [webmasterworld.com]

This method combines the table properties one above with an inline trick for IE which involves adding an non-semantic HTML element, though it uses less elements in its structure.

example: #3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Vertical Center, using inline for IE</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0;}
#outer {
display: table;
vertical-align: middle;
text-align: center;
width: 600px;
height: 200px;
background: #abc;
margin: 0 auto;
}
#outer * {vertical-align: middle;}
#middle {display: table-cell}
/* CODE FOR IE/MAC ONLY \*//*/
#outer {display: block;}
#outer i {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#outer i {
display: inline-block;
height: 100%;
}
</style><![endif]-->
</head>
<body>
<h1>Vertical Center - A single inline element</h1>
<div id="outer"><div id="middle">
<i></i>
<span><a href="#"><img src="#"></a> and then some text</span>
</div></div>
</body>
</html>

I hadn't seen this method before so it perked my nosiness. However it's only good as it stands for centering A single inline element in IE like an image or such like, and that inline element cannot span more than one horizontal line either or it breaks below the 'container' in which case it would be easier to use the line-height method where the line height of the span would be equal to the height of the container , and miss out the <i> trick altogether [** update: see note in post 3 below]

Using Line-height to Vertically Center a Single inline element

example: #4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Vertical Center, using line-height for IE</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0;}
#outer {
text-align: center;
width: 600px;
height: 200px;
background: #abc;
margin: 0 auto;
}
#outer * {vertical-align: middle;}
span {line-height: 200px;}
</style>
</head>
<body>
<h1>Vertical Center - A single inline element</h1>
<div id="outer">
<span><a href="#"><img src="#" width="200" height="100"></a> and then some text</span>
</div>
</body>
</html>


Can the inline-block method work for unknown sized blocks?

It seems so!

Like I said by interest was perked at the inline-block method (#3) because I know it's possible to get IE to honour inline-block on block elements with a bit of hackery, so I thought I'd have a go at mixing the various methods to see if you could truly get a vertical center on any object any size and overflow/stretch properly if content was too long.

It seems it does work, but I need you lot to test Safari IE/mac etc..

Initial thinking:

  • 1. Use table properties for compliant browsers, and you get what you want anyway
  • 2. Use an inline block to mimic the table cell for IE.
  • 3. Use the inline element trick to force the height
  • 4. IE 5/6 will stretch the height of the 'table' (#outer) but can we make IE7 use min-height somewhere else because it honours height
  • override the height for IE7 and put the min-height in the <i>

example: #5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Vertical Center, Any Content, variable height</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0;}
#outer {
text-align: center;
display: table;
vertical-align: middle;
width: 600px;
height: 200px;
padding: 50px 0;
background: #fcc;
margin: 0 auto;
}
#outer * {vertical-align: middle;}
#middle {display: table-cell;}
#inner {background: #0f0; padding: 1px 0;}
.fr {width: 100px; height: 50px; border: 3px solid #000; float: right; margin: 0 0 10px 10px;}
p {margin: 1em 0;} /* IE's collapsing wierdness */
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#outer {
height: auto; /* IE7 */
_height: 200px; /* IE5/6 */
}
#outer i {
display: inline-block;
min-height: 200px; /* IE7 */
_height: 100%; /* IE5/6 */
}
#middle, #inner {
display: inline-block;
width: 100%;
}
#middle {
/* this is part 2 and what makes inline-block work on block elements */
display: inline;
}
/* #inner needs layout */
</style><![endif]-->
</head>
<body>
<h1>Vertical Center - Any content, Any size</h1>
<div id="outer"><i></i>
<div id="middle">
<div id="inner">
<div class="fr">floated right box to test</div>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<!--
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda.</p>
<p>photo</p><p>photo</p>
-->
</div>
</div>
</div>
</body>
</html>

The above seems to work for anything, will center minimum content and stretch to fit if bigger, it uses padding to simulate the centering effect should the content stretch. IE7 grows by virtue that the height has been removed from #outer for it, then because you then can't get the <i> to inherit from auto, you put the height equivalent as min-height onto the <i>.

Notes:
#inner is not really an inline-block because it's not been given the second part of the hack, but it needs layout so that's all inline-block is doing for it.

Not sure what the IE/Mac CSS should be for this but if anyone wants to test the following (it will not have width but should degrade nicely) and let us know..

/* CODE FOR IE/MAC ONLY \*//*/
#outer {
display: block;
}
#outer i {
display: inline-block;
height: 100%;
width: 1px;
}
#middle {
display: inline-block;
}
/**/

General Note:
#outer {display: table;} and #middle {display: table-cell;} along with an extra div was added to most of the above examples because Opera doesn't work/center properly unless the whole table construct is present.

Next step is to see if it will work without the extra <i> element...to follow, my brains tired!

Thoughts of improvements, and any other methods with samples are appreciated

Suzy

edit reason: added numbers to examples for reference

[edited by: SuzyUK at 6:00 am (utc) on May 27, 2007]

 

encyclo




msg:3350755
 6:48 pm on May 26, 2007 (gmt 0)

That's a wonderful summary, thanks for that! Can you confirm the browser support for these techniques? I see you mention IE5/Mac, but does this work in IE5/Win, or is support for "standards-compliant browsers plus IE6"? I am assuming that Standards-compliance Mode (with a full doctype [webmasterworld.com]) is required for all the techniques.

Also, assuming maximum forward-compatibility with regards to the hacks for IE, would it be better to use lte IE 7 rather than specifying all variants of IE (IE8 might even get it right, you never know!)

SuzyUK




msg:3350984
 5:46 am on May 27, 2007 (gmt 0)

Can you confirm the browser support for these techniques? I see you mention IE5/Mac, but does this work in IE5/Win, or is support for "standards-compliant browsers plus IE6"? I am assuming that Standards-compliance Mode (with a full doctype) is required for all the techniques.

The examples were written with a full Doctype in mind, though most of them (#1, #2, #5) will work without it.
If in Quirks mode, or IE5.x support is required they will all need the usual body: text align-center workaround to compensate for margin: 0 auto; if you require horizontal centering too.
All that #3 requires to make it work in either mode is 100% height on the middle div - inheritance chain

Note:
#4 the line-height one, the simplest one has an IE bug *if* it's images (or another replaced element) that you're centering. It doesn't matter which mode it affects IE6 and below, sorry not to have noticed that before, but that explains why #3 method exists! There is another workaround which involves adding 2 x extra spans (inline elements), so I'll leave it as #3 for images, #4 for text ;)

Browser Support = IE5 thru 7 both modes as detailed above, FF, Opera all seem OK. I'm asking for Mac tests, I only know about the IE/Mac issue from what I've read which is why I'm asking a test for that

Also, assuming maximum forward-compatibility with regards to the hacks for IE, would it be better to use lte IE 7 rather than specifying all variants of IE (IE8 might even get it right, you never know!)

You know I actually had the examples written with hacks :o and changed them into a general conditional for clarity, as everyone has their own way - but yes you're right lte IE 7 would be a good way if you want to isolate it completely

It's likely that either way you do it the conditional will need checked on the arrival of IE8. The way I've written the conditional with hacks should ensure that IE8 sees what IE7 sees and that should be good enough for it as what they're seeing is not a workaround but instead just a different method. The chosen methods *should* still work in 8 so there's not much reason to hide it yet and if by chance 8 starts supporting the table properties then you might want to go hiding it but hopefully we will have the choice ;)

[edited by: SuzyUK at 5:51 am (utc) on May 27, 2007]

SuzyUK




msg:3352704
 5:39 pm on May 29, 2007 (gmt 0)

At the risk of chatting to myself, actually I just want to add it here to keep all this stuff together.

- I've reworked method #5 a little to make it compatible in IE5.0. and also to add in box-model workarounds for height if padding is used. (box model workarounds will be doctype dependant)

IE5 does not support inline-block, so you would need to add 2/3 little extras if it's to be supported. Firstly the #inner div needs hasLayout=true, inline-block does this for IE5.5+ but you can add a height hack using the underscore hack to keep IE5 happy, IE5.5 and 6 will also still see this but it doesn't adversely affect them.

then IE5 always did treat display: inline; as a block anyway, i.e. you could add a width and height to an inline element, so all you need to is to make sure all your inline-blocks are subsequently reset to display: inline; that is the workaround for the other IE's anyway, so it's really just the inline element <i> that this may seem weird for.

reworked example #5:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Vertical Center, Any Content, variable height</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; text-align: center;}
#outer {
display: table;
vertical-align: middle;
width: 600px;
margin: 0 auto;
height: 200px; /* approximate height, it will stretch if required */
padding: 50px 0; /* see below - adjust height for IE5.x */
background: #abc;
text-align: center;
}
#middle {
display: table-cell;
vertical-align: middle;
padding: 0 20%; /* padding doesn't work for IE so change it to #inner margins instead for IE only */
}
#inner {
background: #0f0;
padding: 1px 0; /* contain collapsing margins */
}
.fr {
width: 100px;
height: 50px;
border: 3px solid #000;
float: right;
margin: 0 0 10px 10px;
}
p {margin: 1em 0;} /* be explicit for IE's collapsing wierdness */
</style>

<!--[if IE]>
<style type="text/css" media="screen">
#outer {
height: auto; /* IE7 */
_height: 300px; /* IE5 */
_he\ight: 200px; /* IE6 */
}
#outer i {
display: inline-block;
min-height: 200px; /* IE7 */
_height: 100%; /* IE5/6 */
background: #ff0;
vertical-align: middle;
}
#middle {
padding: 0; /* zero padding and set margins on #inner instead */
vertical-align: middle;
}
#middle, #inner {
display: inline-block;
}
#middle, #inner, #outer i {
display: inline;
/* redeclare all inline block elements to be inline for IE5.0
it doesn't support inline-block but treats inline as if it were i-b
*/
}
#inner {/* #inner needs layout */
_height: 1%; /* IE5/6 layout - inline block will do it for 5.5/6/7 - but 5 needs height */
margin: 0 20%;
}
/* now IE5 compatible, Layout given via height and all inline-block elements are also declared inline - for IE5 */
</style>
<![endif]-->

</head>
<body>
<h1>Vertical Center - Any content, Any size</h1>
<div id="outer"><i></i>
<div id="middle">
<div id="inner">
<div class="fr">floated right box to test</div>
<p>ref: <a href="http://www.webmasterworld.com/css/3350566.htm">this thread</a></p>
<p>add favourite foo text</p>
</div>
</div>
</div>
</body>
</html>

Also just a footnote, I so far haven't been able to get this to work without the extra <i> element, but I think that's because of the same problems why IE won't center a replaced element, image (example #4) I think it's actually that it won't center an element with Layout which inline-blocks are by default!

[edited by: SuzyUK at 5:39 pm (utc) on May 29, 2007]

encyclo




msg:3352794
 7:08 pm on May 29, 2007 (gmt 0)

OK, I'll throw a spanner in the works. ;) For the sake of completeness, I think we'll have to include this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Vertical center</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<tr>
<td width="100%" align="center">This text is centered vertically and horizontally.</td>
</tr>
</table>
</body>
</html>

Quirks mode only, eeevil table, invalid height attribute on the table element, but hey it works in IE2+, NN2+, and everything else, and it is much more concise than any of the methods above.

/me puts on flame-retardant suit, ready for incoming ;)

Robin_reala




msg:3352885
 8:47 pm on May 29, 2007 (gmt 0)

Sorry, where's the CSS in that example? ;)

lexipixel




msg:3352957
 10:46 pm on May 29, 2007 (gmt 0)


Sorry, where's the CSS in that example? ;)

-RR

I was about to post the same NON CSS (HTML TABLE) solution.

If something so simple is so complicated and unstable with CSS, why use CSS to do it? (Especially when there's a 10 year old HTML solution that works?)

jessejump




msg:3353031
 2:06 am on May 30, 2007 (gmt 0)

All that CSS is great as an academic exercise, but come on. Sometimes you need to hit a nail in with a wrench.
"But wrenches were never intended......"

SuzyUK




msg:3353172
 7:33 am on May 30, 2007 (gmt 0)

encyclo!
how could you negate my hours of testing with such a ridiculously easy solution, go and wash your mouth out for even mentioning that in this forum! :)

.. it will be much easier if/when IE supports the table properties which I believe might be coming in IE7.5 (2008?).. well it's on the list apparently, but there's years of back support to cope with yet :(

>>academic exercise
Yep, but that's part of the discussion and learning, it's not like the question hasn't arisen before [google.com].

>>If something so simple is so complicated and unstable with CSS, why use CSS to do it?
Well sometimes people don't have the choice to be able to go add a table to the HTML and it may well be a purely aesthetic effect, in which case if the site is coded without tables then it should be the job of CSS.

This is still a very weak area of CSS I'll agree, but it's not exactly *important* to be able to force this effect, it generally only works on a larger screen anyway, there would be no point in putting in a table purely for a Styling effect on a small screen, so a CSS version would degrade much nicer in that case!

it's all choices, as usual ;)

gaouzief




msg:3353178
 7:52 am on May 30, 2007 (gmt 0)

Great guide,
But there seem to be issues when the page is in RTL, arabic and hebrew content (with Internet Explorer)

Any one has a solution for that situation?

piatkow




msg:3353191
 8:28 am on May 30, 2007 (gmt 0)

I opened this thread with a view to removing all those nasty table based layouts that have built up on my sites over time. I think I'll stick with them for another couple of years.

encyclo




msg:3353661
 4:42 pm on May 30, 2007 (gmt 0)

The funny thing is, vertical centering is one of the very few areas where current CSS support just doesn't cut it compared to the old-school presentational HTML, which is still universally supported.

That, however, does not negate the importance of the CSS approach, and everything said about CSS's more graceful degradation and the effect on small-screen devices remains true. As such, the research shown above is interesting and valuable.

In fact, vertical centering is rarely necessary. Rather than fixing a hypothetical center on a screen of indeterminate size, it is usually a better approach to simply center horizontally and add a top margin. If you use a percentage for the top margin, the design is more cross-device-friendly and easier to set up, and is perfectly doable with much simpler CSS than the vertical centering options as listed above.

Sometimes you need to hit a nail in with a wrench.

Yes, but are you sure you should be using a nail?

SuzyUK




msg:3353724
 5:52 pm on May 30, 2007 (gmt 0)

piatkow, that's a shame, this thread is only about one single (IMHO unnecessary) thing - "vertical centering" is not often required and is not necessary in order to use CSS layouts, it's just a technique that some like to achieve and ask about at times. If the effect is really required, as you can see you can still pop in a table - inside your CSS layout!

anyhow in the interest of keeping them all together, another one, using IE Proprietary DHTML Expressions to calculate heights and then margins for IE, while still using table properties for others

I found the following example, amended to fit the demo code, via Georg [gunlaug].

Vertical Center using Table Properties & Dynamic Expressions for IE

example #6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Vertical Center, using IE Expressions</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; text-align: center;}
#outer {
text-align: center;
width: 600px;
height: 200px;
background: #abc;
margin: 0 auto;
display: table;
}
#outer * {vertical-align: middle;}
#middle {display: table-cell; width: 100%; background: #abc;}
#inner {background: #0f0; margin: 0 30px;}
</style>

<!--[if IE]>
<style type="text/css" media="screen">
#outer {height: auto; min-height: 200px; _height: 200px;}
#middle {height: expression(outer.offsetHeight + 'px');}
#inner {
margin-top: expression((
(outer.offsetHeight/2)-(parseInt(offsetHeight)/2) + 'px') <0 ? "0" :
(outer.offsetHeight/2)-(parseInt(offsetHeight)/2) + 'px') ;}
</style>
<![endif]-->

</head>
<body>
<h1>Vertical Center - IE Expressions</h1>
<div id="outer">
<div id="middle">
<div id="inner">
<a href="#"><img src="#" width="200" height="100" alt="#" /></a>
<br>and then some text<br>and then some more text etc..
</div>
</div>
</div>
</body>
</html>

the expression on the #inner div will calculate the height of the outer div then divide that by 2, then it will calculate the height of itself and divide that by 2, the difference gives the amount of the top margin & if the margin is calculated at less than 0 it sets the margin to zero.

If the jscript code/expression in this one can be simplified, do tell!

Josefu




msg:3354303
 8:03 am on May 31, 2007 (gmt 0)

Thanks for your studied posts Suzy - much food for thought there, for sure. By your findings and the ensuing discussion thereon, it would seem a good idea to open a "<table> vs. <div> - which do you use, and why?" thread. I'm sure it will be lively.

Dabrowski




msg:3355600
 11:13 am on Jun 1, 2007 (gmt 0)

Yep, but that's part of the discussion and learning, it's not like the question hasn't arisen before.

Whoa! That returns 985 results!

This is still a very weak area of CSS I'll agree, but it's not exactly *important* to be able to force this effect

You think? How often have you had a horizontal menu bar and wanted the links in the middle? I think that happens somewhere on most sites at some point! Obviously the line-height works fine for that, but the point is still valid.

Sometimes you need to hit a nail in with a wrench.

Yes, but are you sure you should be using a nail?

I once hit a nail with a cucumber. It made a mess. This is a mess.

The funny thing is, vertical centering is one of the very few areas where current CSS support just doesn't cut it compared to the old-school presentational HTML, which is still universally supported.

And it's not only vertical centering, consider trying to center a few blocks next to each other, each of different and unknown size, in an unknown sized container? I opted for a table in the end.

Suzy will remember this one!
[webmasterworld.com...]

it would seem a good idea to open a "<table> vs. <div> - which do you use, and why?" thread. I'm sure it will be lively.

I did. It was.
[webmasterworld.com...]

[edited by: Dabrowski at 11:14 am (utc) on June 1, 2007]

Robin_reala




msg:3355630
 11:39 am on Jun 1, 2007 (gmt 0)

How often have you had a horizontal menu bar and wanted the links in the middle?

Quite often, but I tend to use padding. It'd be nice if we had this facility but the number of times when there aren't reasonably easy alternatives to the same look are quite small.

Regardless, this isn't a CSS issue. This is an 'IE not supporting the standards' issue: CSS has had display:table-cell and vertical-align:middle for almost exactly 9 years now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
div { display: table-cell; height: 200px; width: 200px; border: 3px dotted red; vertical-align: middle; }
</style>
</head>
<body>
<div><p>TEST</p></div>
</body>
</html>

Dabrowski




msg:3355668
 12:26 pm on Jun 1, 2007 (gmt 0)

Quite often, but I tend to use padding.

Yes I have had to use this recently, the line-height way doesn't work if you have a larger first letter.

Regardless, this isn't a CSS issue. This is an 'IE not supporting the standards' issue: CSS has had display:table-cell and vertical-align:middle for almost exactly 9 years now

That is a very good point. It's not the failing of CSS that is the problem. Does anyone know if the next IE will support it properly? Anyone know of an MS site where we can all request this and complain profusely about it?

Joey_33




msg:3357606
 12:21 am on Jun 4, 2007 (gmt 0)

I'm full appreciation for Suzy's tough work - I've been searching throughout the net looking for a solution to the issue in question and Suzy has gathered all of them in one place.

Wish I had come to this site a bit earlier... would have saved so much time.

Anyway, now after I've studied all the possibilities (eyes propped with matchsticks) I must admit, I'm p....d off. What upsets me is that jumble MS is doing or has been doing trying to force and bend standards to their own sick whims.

Anyway, in this case at least I have to come back to good old table cells.

As to css, I cannot imagine having three divs just to center my image vertically... come on. Paradoxically, simplicity and ease of maintanance lies with good old table cells.

Seems still we have to wait a bit. I'm dreaming of the days when each browser shows your masterpiece in exactly the same way. We could then invest our time and efforts in sth more fruitful.

Or maybe we would miss these intellectual 'how-to-make-ie-render-things-logically' challenges ;)
Who knows...

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved