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

代码

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

Answer 4

我觉得它能行

。main_block {宽度:800 px;Margin: 0 auto}