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?
Add a comment
|
10 Answers
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.
11 Comments
Dave Markle
and you might have to give the "div" an explicit width as well.
BalusC
Yes, you indeed need to give the block element an explicit width as well, I edited it in.
Tim Yates
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.BalusC
@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
@Bak: you actually need
text-align: center for that. Just ask a new question if you stucks. |
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>
Comments
One way :
<div align="center">you content</div>
Better way:
<div id="myDiv">you content</div>
CSS for myDIV:
#myDiv{
margin:0px auto;
}
Comments
Provided width is set, and you put a proper DOCTYPE,
Try this:
Margin-left: auto;
Margin-right: auto;
Hope this helps
1 Comment
codeWithMe
For a cleaner look for the developers, use only 'margin: 0 auto;'
add
margin:auto;
Comments
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>
Comments
Try adding this to the style.
margin-left: auto;
Comments
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.
Comments
Create a table with single row and three columns, set left and right width to 100% and voila, the middle one gets centered automatically
1 Comment
Jack G
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.'