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>