Menu
I have an idea for a layout I would like to use, but I can't get it to work correctly. I am hoping someone on here might be able to help as I have spent hours searching.
The layout is like so.
One wrapper div houses 6 child divs. Those child divs must be centered at ALL times regardless of the size of the wrapper div.
<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; }
</style>
</head>
<body>
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br class="clear" />
</div>
</body>
</html>
The problem is when the browser is resized smaller and a box is knocked onto the line below the boxes will alight left, whereas I want them to be always centered. Is this possible using pure css or do I need to use some jquery?
543
Simply put, if you have a div, and the elements inside are set to “display:inline-block” then you can just use “text-align:center” to center them inside. Then reset the “text-align:left” inside the box.
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
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.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
Probably the easiest solution is if you remove the float: left style from the boxes and change the display property to inline-block. Then all you need to do is to text-align: center on the wrapper.
<html>
<head>
<title>Testing</title>
<style>
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; }
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center }
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block }
</style>
</head>
<body>
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br class="clear" />
</div>
</body>
You can test the code here: http://jsbin.com/uqamu4/edit
89
You could use text-align: center in the wrapper and display: inline-block for the boxes to make them behave like normal text elements that are centered no matter what.
Caveat: Doesn't work in IE6 and IE 7. Works in Chrome and FF
JSFiddle here.
44
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
