ansaurus

Question

Answer 1

+5 A:

It's non-trivial, there can be caveats, and it's not something CSS handles well at this point.

It is however quite widely discussed and googleable. This is a good example.

Whatever you do, please don't fallback to tables.

Edit: this is ridiculous, the following works perfectly well in a strict doc without resorting to table markup:

<style type="text/css">
.outer {height: 322px; overflow: hidden; position: relative;}
*|html .outer {display: table; position: static;}

.middle {position: absolute; top: 50%;}
*|html .middle {display: table-cell; vertical-align: middle; position: static;}

.inner {position: relative; top: -50%; overflow: auto;}
*|html .inner {position: static; max-height: 322px;}
</style>
<!--[if IE]>
<style>
.inner {height: expression(Math.min(this.scrollHeight,322)+'px'); width: 100%;} /* for explorer only */
</style>
<![endif]-->

<div class="outer">
    <div class="middle">
     <div class="inner">
       Any text any height
     </div>
    </div>
</div>

annakata 2009-02-09 11:39:27

Downvoted for anti-table fanaticism. You can't on the one hand say "It's non-trivial, there can be caveats, and it's not something CSS handles well at this point." and then on the other hand "oh, don't use the solution that is easily implemented and works everywhere".

17 of 26 2009-02-09 13:16:09

Given that what I actually said was there are problems but *here* is how you do it, yes I can say it. I have never worked anywhere where semantics were less important than design, because design is easily tweaked and support will evolve over time, but broken markup will always be broken markup.

annakata 2009-02-09 13:21:58

(but thank you for explaining your position, I genuinely appreciate that)

annakata 2009-02-09 13:28:29

Answer 2

+17 A:

In short, you're stuffed. More on this in a recent question I asked Can you do this HTML layout without using tables? Basically the CSS fanatics need to get a grip and realize there's simply some things you can't do (or can't do well) without tables.

This anti-table hysteria is nothing short of ridiculous.

Table cells handle vertical centering really well and are backwards compatible as far as you could possibly care about. They also handle side-by-side content way better than floats, relative/absolute positioning or any of the other CSS type methods.

Joel coined (or at least popularized) the term "architect astronauts" in Don't Let Architecture Astronauts Scare You. Well, in that same vein I think the term "CSS Astronaut" (or "CSS Space Cadet") is equally appropriate.

CSS is an incredibly useful tool but it also has some pretty serious limitations. My favourite ishow numbered lists may only appear as "3." but not "3)" or "(3)" (at least prior to CSS3 generated content--or is it CSS2.1? Either way it's not widely supported). What an oversight.

But bigger than that is vertical centering and side-by-side layout. These two areas are still a huge problem for pure CSS. Another poster decided the relative positioning combined with negative margin heights was the way to go. How is that any better than:

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    #outer { height: 200px; border: 1px solid black; width: 600px; background-color: #DDD; }
    #inner { width: 150px;  border: 1px solid red; background: yellow; margin: auto; line-height: 100%;  }
  </style>
</head>
<body>
<table>
<tr>
<td id="outer">
  <div id="inner">Inner</div>
</td>
</tr>
</table>
</body>
</html>

which will work everywhere, everytime.

Here is an article on vertical centering in CSS. To achieve a similar thing they use three nested divs with relative+absolute+relative positioning just to get vertical centering. I'm sorry but whoever wrote that--and anyone who thinks that's a good diea--has simply lost the plot.

A counterargument is given in Tables vs CSS: CSS Trolls begone. The proof really is in the pudding. The vast majority of the top 20 (Alexa) sites still use tables for layout. With good reason.

So decide for yourself: do you want your site to work and spend less time getting it to work? Or do you want to be a CSS Astronaut?

cletus 2009-02-09 11:40:46

Tables are also *completely* unacceptable for layout purposes where their content is not tabular. You table layout proponents need to realise that their are only appropriate to one problem and the cost of failing a desing is far less serious than failing semantics.

annakata 2009-02-09 11:47:31

"failing a desing is far less serious than failing semantics" ...are you serious on that one? Business holders are OK with that?

Ionuț G. Stan 2009-02-09 11:55:39

What if it takes a developer 5 hours just to get a UI semantically correct, that would take him about 10 min to solve using tables. What should that developer tell its boss or client?I had to get that right, so please pay me my $100 per hour, it's important?!

Sebastian Hoitz 2009-02-09 12:03:52

@Ionut: absolutely, because a serious web shop doesn't output bad design to build to in the first place, and support will evolve but bad markup will remain. Further, good CSS guys know how to do this.

annakata 2009-02-09 13:24:37

@Sebastian: no, then we gently (or not so) berate the dev for not asking one of the senior guys how to do this.

annakata 2009-02-09 13:26:08

annakata, i'm sure you're correct, but i selected this answer because it's easy and works...for me. where i am there are no "senior guys", and if i were to try do things the "proper" way every time, i'd get nothing done.

2009-02-09 13:29:17

@Jay: no worries, cletus argument is certainly not without pragmatic value (clearly it has some for you)

annakata 2009-02-09 13:31:42

Answer 3

A:

Try line-height

omoto 2009-02-09 11:41:21

This does not work for items changing its height.

Sebastian Hoitz 2009-02-09 11:49:40

Answer 4

+1 A:

top: 50%; should work. you need to put margin-top to negative half of the height or it will start in the middle. Therefore, you need the height of the inner div. You also probably need position:relative;

Something like this for you inner div.

position:relative;
top: 50%;
height:80px;
margin-top: -40px; /*set to a negative number 1/2 of your height*/

Not very neat working with negative sizes (what does it even mean?) but maybe the easiest way.

Jens Jansson 2009-02-09 11:48:20

"what does it even mean" hehe. yeah i get that feeling every time i do CSS. maybe it's just not my cuppa tea.

2009-02-09 12:04:03

Answer 5

A:

Do you absolutely need to do this with css? The above link looks pretty good, but you could get a result using javasctipt/jquery - determine the height of the innter div and adjust the margin.padding accordingly. Something similar to: (jquery)

var gap = ( $('the-outer-div').height() - $('the-inner-div').height() ) /2;
$('the-inner-div').css( "margin-top" , gap );

Andrew 2009-02-09 11:48:39

That's worse than using tables.

cletus 2009-02-09 11:55:04

how is that worse than some mildly convoluted css?

Andrew 2009-02-09 12:07:04

I'd say this is worse than the tables but better than the CSS :).

17 of 26 2009-02-09 13:12:47

Answer 6

A:

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
    vertically centered
    </div>
  </div>
</div>

more information

Stefan Koenig 2009-02-09 12:09:23

Answer 7

+1 A:

It's non-trivial, there can be caveats, and it's not something CSS handles well at this point.

It is however quite widely discussed and googleable. This is a good example.

Whatever you do, please don't fallback to tables.

The theory of "tables only for tabular data" is great, in theory. At the end of the day though, getting stuff done is what matters.

Let's take the words "CSS" and "table" out of the question, and provide the two solution options as:

Solution A: Ideal in theory, non-trivial, has caveats and is not something that is handled well
Solution B: Not ideal in theory, but is super easy to implement, widely well known and well supported

The proper engineering solution here is without question B. I'm with cletus here - the anti-table fanaticism is absurd.

17 of 26 2009-02-09 13:12:15

ansaurus

tags:

views:

answers:

css vertical centering

related questions