HTML将div与中心对齐

Question

我有3张图像的div：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

它总是对齐到页面的左边，我试图添加相对于主div的位置，但它仍然对齐左边

Answer 1

我使用flexbox：

display:flex是关键

这是Swift Evolution's Removing var from Function Parameters Proposal

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是你想要的吗？

Answer 3

这是因为float类中的.inner-block属性。您可以将其删除并在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 {         宽度：800px;         保证金：0自动     }