Question

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

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

Answer 1

使用display:inline-block;代替浮动

你不能居中浮动，但内联块中心就好像它们是文本一样，所以在你的“行”的外部整个容器上 - 你会为每个图像/标题容器设置text-align: center;（它是如果您需要

，您可以将文本重新对齐到左侧。inline-block;

Answer 2

这些天

CSS Flexbox is well supported。 Go here有关flexbox的精彩教程。

这适用于所有较新的浏览器：

＆＃13;

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}

＆＃13;

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

＆＃13;

有些人可能会问为什么不使用display：inline-block？对于简单的事情它很好，但如果你在块中有复杂的代码，布局可能不再正确居中。 Flexbox比浮动更稳定。

Answer 3

尝试这样：

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

Answer 4

只需将<div>中的浮动元素换行并将其赋予此CSS：

.wrapper {

display: table;
margin: auto;

}

Answer 5

也许这就是您要找的-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>

Answer 6

.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;
}

Answer 7

created: function() {
  this.addBook("The Hobbit", "J.R.R. Tolkien", true);
  this.addBook("A Game of Thrones", "George R.R Martin", true);
  this.addBook("War and Peace", "Leo Tolstoy", false);
  this.addBook("Harry Potter and the Sorcerers Stone", "J.K Rowling", true);
  this.addBook("Jurassic Park", "Michael Crichton", true);
},

对齐浮点数：左边div到中心？

7 个答案: