Best IT Recipes

Center a div in CSS

I am trying to set up a news center (in the bottom div container) on this page:

http://www.luukratief-design.nl/dump/parallax/index.html

I already have text-align: center;

However, it does not work.

Any suggestions?

+25
html css center
Feb 17 '10 at 13:45
source share
10 answers

text-align: center; only centers the inline content element, not the element itself.

If it is an element (a div is), you need to set margin: 0 auto; otherwise, if it is an inline element , you need to set text-align: center; to your parent element.

margin: 0 auto; sets the top and bottom margins to 0 , and the left and right margins to auto (of the same size) so that it is automatically centered. This only works if the block element in question has a known width (both fixed and relative), otherwise it cannot determine where to start and end.

+54
Feb 17 '10 at 13:47
source share

text-align should not be used to center a block element. (except IE6, but this is a bug )

You must fix the width of the block, then use margin: 0 auto;

 #block { width: 200px; border: 1px solid red; margin: 0 auto; }

and

 <div id="#block">Some text... Lorem ipsum</div>
+2
Feb 17 2018-10-17
source share

One of the methods:

 <div align="center">you content</div>

The best way:

 <div id="myDiv">you content</div>

CSS for myDIV:

 #myDiv{ margin:0px auto; }
+2
Feb 17 '10 at 15:40
source share

add

 margin:auto;
+1
Feb 17 2018-10-17
source share

I always use

 <div align="center">Some contents......</div>
+1
Feb 17 '10 at 18:00
source share

The width is set, and you set the correct DOCTYPE,

Try the following:

  Margin-left: auto; Margin-right: auto;

Hope this helps

+1
Sep 18 '12 at 21:00
source share

Try adding this to your style.

 margin-left: auto;
0
Feb 17 '10 at 13:47
source share

Try the following:

 #bottombox { background:transparent url(../images/bg-bottombox.png) no-repeat scroll 0 0; float:none; height:137px; margin:0 auto; padding-top:14px; width:296px; }

This should center the div in the footer.

0
Feb 17 '10 at 15:37
source share

Use text-align: center for the container, display: inline-block for wrapping the div, and display: inline for the content of the div for the horizontal center of the content with an undefined width in browsers:

  <!doctype html> <html lang="en"> <head> <style type="text/css"> /* Use inline-block for the wrapper */ .wrapper { display: inline-block; } .content { display:inline; } .container { text-align:center; } /*Media query for IE7 and under*/ @media, { .wrapper { display:inline; } } </style> <title>Horizontal Centering Test</title> </head> <body> <div class="container"> <div class="content"> <div class="wrapper"> test text </div> </div> </div> </body> </html>
0
Jun 20 2018-12-12T00:
source share

Create a table with one row and three columns, set the width left and right to 100% and voila, the middle one will automatically center.

-3
Feb 17 '10 at 13:48
source share


More articles:


All Articles