HTML将div居中对齐

Question

我有一个包含3个图像的div：

​

.main_block {
  width: 800px;
}

.main_block: before, .main_block: after {
  overflow: hidden;
  content: "";
  display: table;
}

.main_block: after {
  clear: both;
}

.inner_block {
  display: inline-block;
  float: left;
  padding-left: 20px
}

.inner_block img {
  height: auto;
  vertical-align: middle;
}

<div class="main_block">
  <div class="inner_block">
    <img src="img/features/1.png"/>
  </div>

  <div class="inner_block">
    <img src="img/features/2.png"/>
  </div>  
  <div class="inner_block">
    <img src="img/features/3.png"/>
  </div>   
</div>

​

它总是与页面的左侧对齐，我尝试添加相对于主div的位置，但它仍然与左侧对齐

Answer 1

我使用flexbox来实现这一点：

display:flex是关键

这是code

​

.main_block {
    width: 100%;
    display:flex;
    justify-content:space-between;
}

.inner_block {
    display: inline-block;    
    margin: 0 auto;
}

<div class="main_block">
        <div class="inner_block">
                <img src="http://html5doctor.com/wp-content/themes/html5doctor2/images/HTML5_Badge_64.png"/>
            </div>

            <div class="inner_block">
                <img src="http://html5doctor.com/wp-content/themes/html5doctor2/images/HTML5_Badge_64.png"/>
            </div>  
        <div class="inner_block">
                <img src="http://html5doctor.com/wp-content/themes/html5doctor2/images/HTML5_Badge_64.png"/>
            </div>   
    </div>

​

Answer 2

我只是在主div中添加了一个text-align:center;，并删除了内部div中的float: left;。

​

.main_block {
  width: 800px;
  text-align:center;
}

.main_block: before, .main_block: after {
  overflow: hidden;
  content: "";
  display: table;
}

.main_block: after {
  clear: both;
}

.inner_block {
  display: inline-block;
  padding-left: 20px
}

.inner_block img {
  height: auto;
  vertical-align: middle;
}

<div class="main_block">
  <div class="inner_block">
    <img src="img/features/1.png"/>
  </div>

  <div class="inner_block">
    <img src="img/features/2.png"/>
  </div>  
  <div class="inner_block">
    <img src="img/features/3.png"/>
  </div>   
</div>

​

这是你想要的吗？

Answer 3

这是因为.inner-block类中的float属性。您可以删除它并在html文件中添加<center></center>选择器。下面是代码片段：

​

.main_block {
    width: 800px;
}

.main_block: before, .main_block: after {
    overflow: hidden;
    content: "";
    display: table;
}

.main_block: after {
    clear: both;
}

.inner_block {
    display: inline-block;
    padding-left: 20px
}

.inner_block img {
    height: auto;
    vertical-align: middle;
}

<div class="main_block">
      <center>
        <div class="inner_block">
                <img src="http://blinklist.com/files/logos/lastpass-logo.gif"/>
            </div>

            <div class="inner_block">
                <img src="http://blinklist.com/files/logos/lastpass-logo.gif"/>
            </div>  
        <div class="inner_block">
                <img src="http://blinklist.com/files/logos/lastpass-logo.gif"/>
            </div>   
            </center>
    </div>

​