CODEWITHSUNDEEP
css
John
John

Reputation: 6622

How can I horizontally align my divs?

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

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}
<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

And sometimes there is a row div with just one block div in it. What am I doing wrong?

Upvotes: 160

Views: 533470

Answers (11)

Chuck
Chuck

Reputation: 1

How about when I have a div for the menu bar on a page, and within that div I want first div to be left-justified and the second one to be right justified (anti-centered). My left div has a row of option switches for navigating the site and the right div will have the login and other options options...(blank space in between the two divs).

Upvotes: 0

Vikas Kumar
Vikas Kumar

Reputation: 11

instead of float use flex

.row {
    display: flex;
    flex-direction: row;
}

Upvotes: 1

Caner
Caner

Reputation: 59318

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>

Upvotes: 55

Didier Ghys
Didier Ghys

Reputation: 30676

Try this:

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with ability to provide width/height
}​

DEMO

  • having margin: 0 auto; along with width: 100% is useless because you element will take the full space.

  • float: left will float the elements to the left, until there is no space left, thus they will go on a new line. Use display: inline-block to be able to display elements inline, but with the ability to provide size (as opposed to display: inline where width/height are ignored)

Upvotes: 76

Marat Tanalin
Marat Tanalin

Reputation: 14123

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.

Upvotes: 5

user2790239
user2790239

Reputation: 167

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

Upvotes: 15

magiccrafter
magiccrafter

Reputation: 5482

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

Upvotes: 3

irjc
irjc

Reputation: 31

I tried the accepted answer, but eventually found that:

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

Works well so far.

Upvotes: 3

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102448

Although not covering this question (because you want to align the <div>s inside the container) but directly related: if you wanted to align just one div horizontally you could do this:

#MyDIV
{
    display: table;
    margin: 0 auto;
}

Upvotes: 8

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41965

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/

Upvotes: 10

Martin Hennings
Martin Hennings

Reputation: 16866

To achieve what you are trying to do:

Consider using display: inline-block instead of float.

Upvotes: 221

Related Questions