Best IT Recipes

Vertical alignment of div (without tables)

I can horizontally align the div, and all the content looks beautiful. Looking at the vertical alignment of a div that does not contain any tables. I tried to set margin positions to some negative values ​​inside #container but it worked. I know CSS doesn't support this yet?

Here is my markup:

body { background: #777; /* gray */ text-align: center; } #container { margin: 0 auto; width: 968px; text-align: left; } #toptab { background: #f77; /* red */ height: 14px; width: 968px; } #middletab { background: #7f7; /* green */ width: 968px; } #data { width: 948px; /* 948 for the box plus we need 20 more px to handle the padding */ padding-left: 10px; padding-right 10px; } #bottomtab { background: #77f; /* blue */ height: 14px; width: 968px; } 
 <div id="container"> <div id="toptab"></div> <div id="middletab"> <div id="data"> The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big red bear. </div> </div> <div id="bottomtab"></div> </div>

Run the snippet above and click "full page" to see what it currently looks like. In principle, it looks great horizontally, but now I need it to also center vertically on the page.

The item I want to align vertically is the #container div. The effect will force the entire div and all subselects to not only horizontally align, but also vertically. I know that this is possible, and I know that Andy Budd found such a solution, but it does not seem to work for me.

+19
html css alignment
Dec 15 '09 at 19:23
source share
8 answers

If you have the option to explicitly set the height of your container (which is not like this in the case), there is no DIV for cross -centering the container without a cross-browser solution .

Using a table is completely viable, but you noticed that it is impossible to use.

If javascript is an option, we can easily fix this for you. A jQuery plugin already exists to vertically align the container.

 (function ($) { // VERTICALLY ALIGN FUNCTION $.fn.vAlign = function() { return this.each(function(i){ var ah = $(this).height(); var ph = $(this).parent().height(); var mh = (ph - ah) / 2; $(this).css('margin-top', mh); }); }; })(jQuery);

And you would vertically align the DIV block as follows:

 $('#example').vAlign();

Adapted from a Simple Vertical Alignment Plugin .

+21
Dec 15 '09 at 19:36
source share
— -

See Vertical Centering with CSS or Vertical Center Content with CSS or Vertical Centering CSS . Method 3 of the first link is the same as the vertical center of CSS using float and clear .

And of course, it’s nice to check the result using a service like browsershots.org



EDIT: I changed your CSS and markup to implement method 3:

CSS

 * { margin:0; padding:0; } html, body { height: 100%; } body { text-align:center; } #floater { float: left; height:50%; margin-bottom: -100px; } #container { clear:both; position: relative; margin: 0 auto; width:968px; text-align: left; height: 200px; } ...

Markup:

 <body> <div id="floater"></div> <div id="container"> ...

The disadvantage that I see in this method is that with CSS you need to know the height of your content in advance so that you can apply a negative margin of half that height to the floater. In the example, I selected 200px .

Look at the action .

+8
Dec 15 '09 at 19:31
source share

There are several ways to do this, all with a compromise.

  • Use position:absolute , fixed height and overflow:auto .
  • Use display:table , display:table-cell and vertical-align:middle
  • Use javascript

I think option number 2 is pretty good.

edit: I do not think option 2 will work in IE. You can depend on javascript if you want to maintain dynamic height.

+2
Dec 15 '09 at 19:35
source share

With pure CSS, this is only possible if the div has a fixed height . You can then position it absolute and set its top and left to 50% and margin-top and margin-left to the negative half of their width and height respectively.

Here is SSCCE , just copy ' paste'n'run . The border is purely presentation, other styles are necessary.

 <!doctype html> <html lang="en"> <head> <title>SO question 1909753</title> </head> <style> #content { position: absolute; width: 300px; height: 200px; top: 50%; left: 50%; margin-left: -150px; /* Negative half of width. */ margin-top: -100px; /* Negative half of height. */ border: 1px solid #000; } </style> <body> <div id="content"> content </div> </body> </html>

If there is no fixed height, you will need to understand Javascript and live with the fact that the client will see that the div is moving quickly in the middle while the page is loading, which may cause "wtf?". experience.

+2
Dec 15 '09 at 19:50
source share

Create a div container with the display: table style and use the vertical-align: top style for the internal display: inline-block elements

Working demo at http://jsfiddle.net/uzcrt/

+1
May 30 '12 at 19:54
source share

If your main container height is fluid, your only reliable choice is to use JavaScript (of course, the discussion point here, of course, the discussion one). In JavaScript, you must first find the height of the container, then the height of the window and adjust the top offset accordingly. Here's how you do it in jQuery:

 $(function() { $(window).resize(function() { var top = $(window).height() / 2 - $('#content').height() / 2; top = top < 0 ? 0 : top; $('#content').css('top', top); }); $(window).resize(); });

And CSS to make it work:

 #content { position: absolute; /* Everything else is optional: */ width: 960px; margin: 0 auto; }

And HTML:

 ... <body> <div id="#content">Content here</div> </body> </html>

This is still pretty simple and will work if the user has JavaScript enabled.

0
Dec 15 '09 at 19:46
source share

I think this can be done without display: table .

that's an example:

HTML:

 <div class="notificationArea"> something </div>

CSS

 .notificationArea { position: absolute; top: 50%; bottom: 50%; right: 50%; left: 50% }
0
Mar 04 '11 at 23:32
source share

CSS class to align the element in the middle of the screen:

 .middle{ position: absolute; top: 50%; /*50% from top*/ left: 50%; /*50% from left*/ /*remove 50% of element width and height to align the element center in the position*/ transform: translateY(-50%) translateX(-50%); }

Now add this class to the HTML element

0
Mar 22 '17 at 11:54 on
source share


More articles:


All Articles