Position 3 or more divs centrally within a single container div
I cant seem to find a definitive answer to this. I have 开发者_运维知识库three or more div's each 120px wide within a div of 100% width; The amount of divs in the div is variable, but I want them to appear in the centre of the containing div and spread outwards from the middle the more that are added. I guess I could probably just wrap them in a tag, but I would rather a CSS way of doing it. Can anyone provide a nice mechanism for doing this at all please?
I think you're asking for too much for pure CSS. Here is what I came up with. But it's not what you want. The #innerwrap would need a variable width (auto would be best) but that would break the rules for centering its contents. So I don't think it's possible without some jQuery.
<style>
#container{
border:1px solid blue;
margin:0;
padding:20px;
text-align:center;
}
#container div{
display:inline;
padding:20px;
border:1px solid red;
}
</style>
<body>
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
What about: http://jsfiddle.net/jennyfofenny/eSR89/ ?
You can use display:inline-block for centered divs.
加载中,请稍侯......
精彩评论