将浮动对齐: 左 div 到中心？

我希望有一组图像横跨整个页面水平显示。每个图片下面都有一些链接，所以我需要在每个图片/链接组周围放一个容器。

最接近我想要的是把它们放在 div 中，浮动: left。问题是我希望容器对齐的中心不是左边。我怎样才能做到这一点。

194347 次浏览
小开
最佳答案

use display:inline-block; instead of float

you can't centre floats, but inline-blocks centre as if they were text, so on the outer overall container of your "row" - you would set text-align: center; then for each image/caption container (it's those which would be inline-block;) you can re-align the text to left if you require

小开

try it like this:

  <div id="divContainer">
<div class="divImageHolder">
IMG HERE
</div>
<div class="divImageHolder">
IMG HERE
</div>
<div class="divImageHolder">
IMG HERE
</div>
<br class="clear" />
</div>


<style type="text/css">
#divContainer { margin: 0 auto; width: 800px; }
.divImageHolder { float:left; }
.clear { clear:both; }
</style>
小开 
.contentWrapper {
float: left;
clear: both;
margin-left: 10%;
margin-right: 10%;
}


.repeater {
height: 9em;
width: 9em;
float: left;
margin: 0.2em;
position: relative;
text-align: center;
cursor: pointer;
}
小开

CSS Flexbox is well supported these days. Go here for a good tutorial on flexbox.

This works fine in all newer browsers:

#container {
display:         flex;
flex-wrap:       wrap;
justify-content: center;
}


.block {
width:              150px;
height:             150px;
background-color:   #cccccc;
margin:             10px;
}
<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>

Some may ask why not use display: inline-block? For simple things it is fine, but if you got complex code within the blocks, the layout may not be correctly centered anymore. Flexbox is more stable than float left.

小开

Just wrap floated elements in a <div> and give it this CSS:

.wrapper {


display: table;
margin: auto;


}
小开

Perhaps this what you're looking for - https://www.w3schools.com/css/css3_flexbox.asp

CSS:

#container {
display:                 flex;
flex-wrap:               wrap;
justify-content:         center;
}


.block {
width:              150px;
height:             150px;
margin:             10px;
}

HTML:

<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
</div>
小开 
<html>
<head>
<title>Downloads</title>


<style>
.download-container{
width:90%;
margin:0 auto;
text-align:center;
border:0px;
padding:20px;
}
.download-cell{
vertical-align:center;
height:100px;
width:340px;
border:1px solid black;
border-radius:8px;
font-size:24px;
font-color:black;
z-index:2;
margin:20px;
background:white;
color:black;
display:inline-block;
margin:20px;
padding-top:20px;
}
</style>
</head>
<body>


<!--DOWNLOADS-->
<div class="download-container">
<br>
<div class="download-cell">
<a target="_blank" class="module" href="http://www.woocommerce.com">
<img src="Images/woo.png" style="width:60px; height:60px;" />
WooCommerce
</a>
</div>
        

<div class="download-cell">
<a target="_blank" class="module" href="http://magento.com">
<img src="Images/magento.png" style="width:60px; height:60px;" />
MAGENTO
</a>
</div>
        

<div class="download-cell">
<a target="_blank" class="module" href="http://www.lightspeedhq.com">
<img src="Images/lightspeed.png" style="width:60px; height:60px;" />
LIGHTSPEED
</a>
</div>
    

<div class="download-cell">
<a target="_blank" class="module" href="http://www.shopify.com">
<img src="Images/shopify.png" style="width:60px; height:60px;" />
SHOPIFY
</a>
</div>


<div class="download-cell">
<a target="_blank" class="module" href="http://opencart.com">
<img src="Images/opencart.png" style="width:60px; height:60px;" />
OPENCART
</a>
</div>
        

<div class="download-cell">
<a target="_blank" class="module" href="http://www.prestashop.com">
<img src="Images/prestashop.png" style="width:60px; height:60px;" />
PRESTASHOP
</a>
</div>
    

<div class="download-cell">
<a target="_blank" class="module" href="http://www.wix.com">
<img src="Images/wix.png" style="width:60px; height:60px;" />
WIX eCommerce
</a>
</div>
</div>


</body>
</html>

提交答案