How can I horizontally align my divs?

Question

For some reason my divs won\'t center horizontally in a containing div:

相关标签:

Answer 1

I tried the accepted answer, but eventually found that:

margin: 0 auto;
width: anything less than 100%;

Works well so far.

Answer 2

Using FlexBox:

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

.row {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* for centering 3 blocks in the center */
  /* justify-content: space-between; for space in between */ 
}
.block {
  width: 100px;
}

The latest trend is to use Flex or CSS Grid instead of using Float. However, still some 1% browsers don't support Flex. But who really cares about old IE users anyway ;)

Fiddle: Check Here

Answer 3

I've use this two approaches when I need to handle horizontal div alignment.
first (Center Aligning Using the margin Property):

.center-horizontal-align {
    margin-left: auto;
    margin-right: auto;
    width: (less than 100%) or in px
}

Setting the left and right margins to auto specifies that they should split the available margin equally. Center-aligning has no effect if the width is 100%.

and the second:

.center-horizontal-align {
    display: table
    margin-left: auto;
    margin-right: auto;
}

Using the second approach is convenient when you have several elements and you want all of them to be centred in one table cell(i.e. several buttons in one cell).

Answer 4

Alignments in CSS had been a nightmare. Luckily, a new standard is introduced by W3C in 2009: Flexible Box. There is a good tutorial about it here. Personally I find it much more logical and easier to understand than other methods.

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block {
  width: 100px;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

Answer 5

If elements are to be displayed in one line and IE 6/7 do not matter, consider using display: table and display: table-cell instead of float.

inline-block leads to horizontal gaps between elements and requires zeroing that gaps. The most simple way is to set font-size: 0 for parent element and then restore font-size for child elements that have display: inline-block by setting their font-size to a px or rem value.

Answer 6

Another working example, using display: inline-block and text-align: center

HTML:

<div class='container'>
    <div class='row'>
        <div class='btn'>Hello</div>
        <div class='btn'>World</div>
    </div>
    <div class='clear'></div>
</div>

CSS:

.container {
    ...
}
.row {
    text-align: center;
}
.btn {
    display: inline-block;
    margin-right: 6px;
    background-color: #EEE;
}
.clear {
    clear: both;
}

Fiddle: http://jsfiddle.net/fNvgS/