Hi im trying to center the newsslider (in the div bottom-container) in this page: http://www.luukratief-design.nl/dump/parallax/index.html
I already have text-align: center;
Still it does not work.
any suggestions?
+22
A:
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 fixed width specified, else it cannot figure where to start and end.
BalusC
2010-02-17 13:47:30
and you might have to give the "div" an explicit width as well.
Dave Markle
2010-02-17 13:48:24
Yes, you indeed need to give the block element an explicit width as well, I edited it in.
BalusC
2010-02-17 13:49:01
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
2010-02-17 15:43:52
@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
2010-02-17 15:52:56
does it work on Chrome? 'cause in my Chrome it doesn't make text inside my div to align to the center.
Bakhtiyor
2010-06-10 19:09:52
@Bak: you actually need `text-align: center` for that. Just ask a new question if you stucks.
BalusC
2010-06-10 19:12:27
A:
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
2010-02-17 13:48:42
+1
A:
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
2010-02-17 13:49:43
A:
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
2010-02-17 15:37:08
+1
A:
One way :
<div align="center">you content</div>
Better way:
<div id="myDiv">you content</div>
CSS for myDIV:
#myDiv{
margin:0px auto;
}
c0mrade
2010-02-17 15:40:35