41

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?

Improve this question
0

10 Answers 10

Reset to default
86

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

and you might have to give the "div" an explicit width as well.
Yes, you indeed need to give the block element an explicit width as well, I edited it in.
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.
@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).
@Bak: you actually need text-align: center for that. Just ask a new question if you stucks.
|
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>
Improve this answer

Comments

5

One way :

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

Better way:

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

CSS for myDIV:

#myDiv{ margin:0px auto; }
Improve this answer

Comments

2

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

Try this:

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

Hope this helps

Improve this answer

1 Comment

For a cleaner look for the developers, use only 'margin: 0 auto;'
1

add 

margin:auto;
Improve this answer

Comments

1

i always use

<div align="center">Some contents......</div>
Improve this answer

1 Comment

I confirm that this works with Firefox(v54), Chrome(v58) and Safari(v10).
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>
Improve this answer

Comments

0

Try adding this to the style.

margin-left: auto;
Improve this answer

Comments

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.

Improve this answer

Comments

-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

Improve this answer

1 Comment

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.'

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.