HTML Выравнивание дел до центра

Question

У меня есть DIV с 3 изображениями:

.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

Я просто добавлю text-align:center; к главному div и удаляю float: left; на внутренних div.

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

Это из-за float собственности в классе .inner-block. Вы можете удалить его и добавить <center></center> селектор в html-файл. Фрагмент кода ниже:

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

Я использую 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 4

Я думаю, что это работает

.main_block { ширина: 800px; margin: 0 auto }