Menu
I have this html:
<div class="object-box"> <img ... /> <span class="caption">This is the caption</span> </div> Which is accompanied with this CSS:
.object-box .caption, .object-box img { display: block; } .object-box { border: 1px solid; } I would like the surrounding div to shrink-wrap to its contents. I can achieve this by using float: ... or display: inline-block. However, I'd also like it to be centered on the page, using margin: auto. The two approaches don't seem to be compatible.
Is it possible to create such a shrink-wrapped, centered container, without adding a wrapper element?
jsFiddle here
973
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
If the target element is absolutely positioned, you can center it by moving it 50% in one direction ( left: 50% ) and then transforming it 50% in the opposition direction ( transform:translateX(-50%) ). This works without defining the target element's width (or with width:auto ).
To center align text in table cells, use the CSS property text-align. The <table> tag align attribute was used before, but HTML5 deprecated the attribute. Do not use it. So, use CSS to align text in table cells.
Centering a block or image The way to do that is to set the margins to 'auto'. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width.
<!doctype html> <html> <head> <title>ugh</title> <style> div#not-floated { display:table; margin:0 auto; } div#floated { float:right; position:relative; right:50%; } div#floated-inner { float:left; position:relative; left:50%; } </style> <!--[if lt IE 8]> <style type="text/css"> #container { text-align: center; } #container * { text-align: left; } div#not-floated { zoom: 1; display: inline; } </style> <![endif]--> </head> <body> <div id="container"> <div id="not-floated"> <img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg"><br> ok. </div> </div> <div id="floated-container"> <div id="floated"><div id="floated-inner"> <img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg"> </div></div> </div> </body> </html> Simple explanation is.. display:table; causes it to shrinkwrap in modern browsers, thats the only way to center widthless block level in modern browsers with margin:0 auto;.
In IE it's a matter of using parent element to set text-align:center on your shrinkwrapped display:inline block level element.
For floats its just 50% math using containers for IE.
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
