skip to main content

kiesler.at

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>

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         }




RSSComments - Make a comment
The comments are owned by the poster. We are not responsible for its content.
RSSAll Articles
2008, 2007, 2006, 2005, 2004

What's Related

Article Manager

CSS

Link Manager

CSS

Bulletin Board

CSS

RSS News Feeds

CSS

Announcements

CSS

Latest Updates

AdministrativeTexts
updated by freddiemac1993, 2013-06-14
wiki

Re: adventures
created by brittdavis10, 2012-02-23 (1 rply, 3 views)
thread

Re: how to run phpwebsite...
created by alexander, 2011-08-25 (2 rpls, 3607 views)
thread

Re: Forum tags
created by HaroldFaragher, 2011-08-22 (3 rpls, 8488 views)
thread


Zu den KO2100 Foren