HTML align div to the center

Question

I have a div with 3 images :

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

And it allways align to the left of the page, i tried to add position relative to the main div but it's still align to the left

Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — beerwin, Aug 31 '16 at 09:33

Maciej Wojcik · Accepted Answer · 2016-08-31T09:42:12.533

I use flexbox for this:

display:flex is the key

here is the 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>

score 0 · Answer 2 · answered Aug 31 '16 at 09:34

I just add a text-align:center; to the main div, and remove float: left; on the inner divs.

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

Is it what you want ?

score -1 · Answer 3 · answered Aug 31 '16 at 09:35

It is because of the float property in the .inner-block class. You can remove it and add <center></center> selector in the html file. Code snippet below:

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

It's bad practice to use tag in html – Maciej Wojcik Aug 31 '16 at 09:39 — Maciej Wojcik, Aug 31 '16 at 09:39

score -1 · Answer 4 · answered Aug 31 '16 at 09:39

-1

I think it works

.main_block { width: 800px; margin: 0 auto }

answered Aug 31 '16 at 09:39

Rockers Technology

477
4
12

HTML align div to the center

4 Answers4