40

I'm trying to center a <div> horizontally.

I already have text-align: center; on the <div> itself, but it does not work.

Any suggestions?

Ryan M
  • 18,333
  • 31
  • 67
  • 74
Luuk
  • 863
  • 2
  • 9
  • 8

10 Answers10

81

The text-align: center; only centers the element's inline contents, not the element itself.

If it is a block element (a div is), you need to set margin: 0 auto;, else if it is an inline element, you need to set the text-align: center; on its parent element instead.

The margin: 0 auto; will set top and bottom margin to 0 and left and right margin to auto (of the same size) so that it automagically puts itself in the center. This only works if the block element in question has a known width (either fixed or relative), else it cannot figure where to start and end.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 3
    and you might have to give the "div" an explicit width as well. – Dave Markle Feb 17 '10 at 13:48
  • 2
    Yes, you indeed need to give the block element an explicit width as well, I edited it in. – BalusC Feb 17 '10 at 13:49
  • IIRC, some older versions of IE will not recognize `auto` margin values, but they *will* (erroneously) use `text-align` to center block elements, so use both if you can. – Tim Yates Feb 17 '10 at 15:43
  • 1
    @T. Yates: Nobody uses IE5 or older (read: it works perfectly fine in IE6 which is considered as the **absolute** minimum you (probably) would like to support). – BalusC Feb 17 '10 at 15:52
  • does it work on Chrome? 'cause in my Chrome it doesn't make text inside my div to align to the center. – Bakhtiyor Jun 10 '10 at 19:09
  • 1
    @Bak: you actually need `text-align: center` for that. Just ask a new question if you stucks. – BalusC Jun 10 '10 at 19:12
  • `text-align: center;` works perfectly with `inline-block` elements. This is the only answer that worked for me – Daniel Oct 19 '15 at 06:23
  • You might need `float: none;` as well. – intrepidis Oct 23 '20 at 12:58
  • @intrepidis: nope. – BalusC Oct 23 '20 at 13:01
  • @BalusC Yep. It didn't work for us unless we added `float: none;`. My company still use IE 11 in some quarters. – intrepidis Oct 23 '20 at 13:54
  • @intrepidis: It's only needed if `float` is inherited from a parent which has (incorrectly) set it to a non-`none` value. If this wasn't present in first place, then it's not needed at all. In other words, it's by default not needed at all. – BalusC Oct 23 '20 at 14:22
6

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

You have to 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>
Boris Guéry
  • 47,316
  • 8
  • 52
  • 87
5

One way :

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

Better way:

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

CSS for myDIV:

#myDiv{
margin:0px auto;
}
ant
  • 22,634
  • 36
  • 132
  • 182
2

Provided width is set, and you put a proper DOCTYPE,

Try this:

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

Hope this helps

1

Use text-align: center for the container, display: inline-block for the wrapper div, and display: inline for the content div to horizontally center content that has an undefined width across 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>
Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
1

add 

margin:auto;
John Boker
  • 82,559
  • 17
  • 97
  • 130
1

i always use

<div align="center">Some contents......</div>
Ashok
  • 61
  • 3
0

Try adding this to the style.

margin-left: auto;
Steve Danner
  • 21,818
  • 7
  • 41
  • 51
0

Try this:

#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;
}

That should center the div in your footer.

tahdhaze09
  • 2,220
  • 1
  • 21
  • 36
-2

Create a table with single row and three columns, set left and right width to 100% and voila, the middle one gets centered automatically

alemjerus
  • 8,023
  • 3
  • 32
  • 40
  • 2
    This is a valid answer. Impractical in most scenarios, yes. HOWEVER, still valid. Please stop downvoting a valid answer just because you 'feel like it.' – Jack G Mar 27 '17 at 00:08