logo标签列表

将float:left的div居中对齐？

htmlcss
102

我希望页面上横向展示一组图片。每张图片下方有几个链接，因此需要在每张图片/链接组周围放置一个容器。

目前我最接近想要的效果是将它们放在左浮动的div中。但问题是我想让这些容器居中，而不是靠左对齐。如何实现呢？

7个回答
230

使用display:inline-block;代替float

浮动元素无法居中，但是像文本一样居中的是inline-block，因此在你的"row"外部整体容器上设置text-align:center;，然后针对每个图像/标题容器（这些容器应该使用inline-block;），如果需要，可以重新将文本对齐到左侧。

3
以防有人遇到元素之间出现的空格问题，可以通过在代码中定义元素时去掉空格来解决，比如 '<img></img><img></img>' 或 '<img></img><!-- Comment --><img></img>'。请注意，翻译保持原意，同时使语言更加通俗易懂，不提供额外的解释。 - Maarten
1
或者设置父元素 font-size:0，并在子元素上恢复它。或者在父元素上使用 letter-spacing:-.31em，在子元素上使用 letter-spacing:0。 - Mike Causer
@Baumr 使用flexbox代替。下面有一个示例。 - Jan Derk
3
在使用 display:inline-block 时，你可能需要添加 vertical-align:middle。 - ibsenv
50

CSS弹性盒子(Flexbox)现在得到了很好的支持。点击这里查看相关支持情况，或者去这里学习如何使用。

这在所有较新版本的浏览器中都能正常工作:

#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>

有人会问为什么不使用display: inline-block呢？对于简单的情况，这样做是可以接受的，但如果块内包含复杂的代码，则布局可能无法正确居中。Flexbox比左浮动更稳定。

这个可以用来水平居中。那么垂直居中怎么办？ - Cullub
要垂直居中，请给容器设置一个高度（例如 height: 500px;），并添加 align-items: center;。 - Jan Derk
9

试着像这样：

  <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>
1
不鼓励仅发布代码而没有解释。此外，在<style>标签上使用type="text/css"是多余的，几年来已经不再必要，并且将清晰的类应用于<br>标签是一种反模式。 - Stephen M Irving
1
@StephenMIrving，您在该人最初回复后10年才回复，因此标准完全不同。 - thethiny
8

只需将浮动元素包裹在一个 <div> 中，并给它添加以下 CSS：

.wrapper {

display: table;
margin: auto;

}
1

我想这可能是您正在寻找的内容 - 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>
0
.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;
}
强烈不建议仅发布代码而没有解释。 - Stephen M Irving
2
@StephenMIrving，不鼓励复制/粘贴相同的评论并进行downvote垃圾邮件。问题是：“如何将float:left div对齐到中心？”给出的带有“contentWrapper”和“repeater”类的答案非常自我解释。这不是仅包含代码内容的复杂算法问题的答案。我建议您在自动机器人/垃圾邮件代码答案时分析您的判断力，并附上downvote +相同的评论。 - Teoman shipahi
-1
<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>
强烈不建议仅发布代码而没有解释。 - Stephen M Irving
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接