Vertical Center + Align Right with CSS

Choose

Vertical Center + Align Right with CSS

updated by admin, 2004-10-11

It took me quite some time to get this right, so why not write it down? There are a couple of articles regarding vertical centering with CSS (which is bloody complicated). But, at least Yuhu's Definitive Solution with Unknown Height is very fragile and doesn't work anymore, as soon as you start centering or text-aligning it right.

Yuhu's Definitive Solution for Vertical Centering
In html, you need three divs. They should look something like this: `1 <body>` `2 <div class="outer">` `3 <div class="middle">` `4 <div class="inner">` `5 content` `6 </div>` `7 </div>` `8 </div>` `9 </body>` and, you of course need the corresponding css code: `1 <style type="text/css">` `2 #outer {` `3 height: 400px;` `4 overflow: hidden;` `5 position: relative;` `6 }` `7 #outer[id] {` `8 display: table;` `9 position: static;` `10 }` `11` `12 #middle {` `13 position: absolute;` `14 top: 50%;` `15 }` `16 #middle[id] {` `17 display: table-cell;` `18 vertical-align: middle;` `19 position: static;` `20 }` `21` `22 #inner {` `23 position: relative;` `24 top: -50%` `25 }` `26 #inner[id] {` `27 position: static;` `28 }` `29 </style>`

Yuhu's Definitive Solution for Vertical Centering

In html, you need three divs. They should look something like this:

1 <body>
2         <div class="outer">
3                 <div class="middle">
4                         <div class="inner">
5                                 content
6                         </div>
7                 </div>
8         </div>
9 </body>

and, you of course need the corresponding css code:

1 <style type="text/css">
2         #outer {
3                 height: 400px;
4                 overflow: hidden;
5                 position: relative;
6         }
7         #outer[id] {
8                 display: table;
9                 position: static;
10         }
11
12         #middle {
13                 position: absolute;
14                 top: 50%;
15         }
16         #middle[id] {
17                 display: table-cell;
18                 vertical-align: middle;
19                 position: static;
20         }
21
22         #inner {
23                 position: relative;
24                 top: -50%
25         }
26         #inner[id] {
27                 position: static;
28         }
29 </style>

Aligning the content right
Naive people like me would think, a simple `text-align: right` or `text-align: center` in the `#inner` - section of the css would align the content right or even center it. Other's, who are not that naive might think, that at least a `margin: auto` in `#inner` would center the whole mess. All wrong. While I haven't figured out yet, how to center it, there's a very simple way to align it right. Just add a "float: right". That's it. `22 #inner {` `23 position: relative;` `24 float: right;` `25 top: -50%` `26 }`

Aligning the content right

Naive people like me would think, a simple text-align: right or text-align: center in the #inner - section of the css would align the content right or even center it. Other's, who are not that naive might think, that at least a margin: auto in #inner would center the whole mess. All wrong.

While I haven't figured out yet, how to center it, there's a very simple way to align it right. Just add a "float: right". That's it.

22         #inner {
23                 position: relative;
24                 float: right;
25                 top: -50%
26         }