How to center multiple inner divs horizontally?

Question

I've tried various post answers but still not able to center the divs I had.

Here is my Html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dashboard</title>
    <link rel="stylesheet" href="dashboard.css">
  </head>
  <body>
    <div class="maindiv">
        <div class="row1">

        </div>

        <div class="row1">

        </div>

        <div class="row1">

        </div>
    </div>





  </body>
</html>

The CSS I was using is below:

body{
  font-family: Myriad Set Pro;
  background-color: #f7f8f9;

}

.maindiv{
  padding: 20px;
  width: 70%;
  margin: 0 auto;
  border: 1px solid black;

}

#innerrow1{
  width: 80%;
  position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

.row1{
  margin: 0 auto;
  display: inline-block;
  background-color: #efefef;
  border: 1px solid #b5b5b5;
  width : 300px;;
  height: 290px;
}

I used float:left for placing divs next to each other but I had issues with height. I'm using display:inline-block for that instead. Jsfiddle link : https://jsfiddle.net/Lywbygum/

What do you mean centered? If they are next to each other, they are not centered. — Heretic Monkey, Apr 10 '17 at 17:38
Possible duplicate of [How to horizontally center a
in another
?](http://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — Heretic Monkey, Apr 10 '17 at 17:39

score 2 · Answer 1 · answered Apr 10 '17 at 17:37

Just add text-align: center; to the main div:

body {
  font-family: Myriad Set Pro;
  background-color: #f7f8f9;
}

.maindiv {
  padding: 20px;
  width: 70%;
  margin: 0 auto;
  border: 1px solid black;
  text-align: center;
}

#innerrow1 {
  width: 80%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.row1 {
  margin: 0 auto;
  display: inline-block;
  background-color: #efefef;
  border: 1px solid #b5b5b5;
  width: 100px;
  height: 290px;
}

<div class="maindiv">
  <div class="row1"></div>
  <div class="row1"></div>
  <div class="row1"></div>
</div>

Michael Coker · Accepted Answer · 2017-04-10T18:06:37.937

1

You can use display: flex; justify-content: center; on the parent.

body {
  font-family: Myriad Set Pro;
  background-color: #f7f8f9;
}

.maindiv {
  padding: 20px;
  width: 70%;
  margin: 0 auto;
  border: 1px solid black;
  display: flex;
  justify-content: center;
}

#innerrow1 {
  width: 80%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.row1 {
  background-color: #efefef;
  border: 1px solid #b5b5b5;
  width: 100px;
  height: 290px;
  margin: 0 1em;
}

<div class="maindiv">
  <div class="row1">

  </div>

  <div class="row1">

  </div>

  <div class="row1">

  </div>
</div>

edited Apr 10 '17 at 18:06

answered Apr 10 '17 at 17:38

Michael Coker

52,626
5
64
64

I am not as genned up on flex yet as I should be, but tell me, other than "just because" is there a compelling reason to go this way rather than just text-align: center? – mayersdesign Apr 10 '17 at 17:40
@mayersdesign it's just another approach but it has way more options and flexibility to lay those boxes out dynamically and responsively. It basically gives you a ton of control over the layout with a few CSS properties. `text-align: center` is really basic. – Michael Coker Apr 10 '17 at 17:44
Thanks Michael, I really must look into it. Of course we could debate all day long which is the better recommendation to the OP haha :) Thanks for your time. – mayersdesign Apr 10 '17 at 17:45
@mayersdesign no problem, you should, it gives you the option to space the elements with fluid, intelligent properties other than simple margins, re-order them, change the layout from row to column, keep 2 on the left and one on the right, etc. Tons of stuff. Flexbox is a far better option, no reason to not use it unless you're concerned with the < 3% of browsers that don't support it. Whether it's a better solution for OP or not is up to OP, not us to debate, but it wouldn't be much of a debate if you don't know how to use `flex` ;) I upvoted you, it's the simplest answer. – Michael Coker Apr 10 '17 at 17:50
@mayersdesign this is a good visual guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Michael Coker Apr 10 '17 at 17:51
1

Thanks very much. I have no choice anyway now Bootstrap 4 is going that way haha. Things were so much easier with tables!! ;) Thanks for the vote, very gentlemanly. – mayersdesign Apr 10 '17 at 17:52
@MichaelCoker But how do we achieve spacing between them? – Apr 10 '17 at 17:57
@SharathV horizontal margin or flex properties like `justify-content: space-between` or `justify-content: space-around`. I added a margin to show. – Michael Coker Apr 10 '17 at 18:06
@MichaelCoker Whoa! And thanks for providing a reference to CSS tricks. – Apr 10 '17 at 18:15
@SharathV no problem! `flex` gives you a ton of awesome options to lay those boxes out (I use `justify-content: space-between` and `justify-content: space-around` a lot!), but you can always fall back to just using margins like you would with `inline-block` or any other approach. – Michael Coker Apr 10 '17 at 18:18

score 0 · Answer 3 · answered Apr 10 '17 at 17:37

0

Set text-align:center .maindiv.

answered Apr 10 '17 at 17:37

Jorden

153
1
3
16

score 0 · Answer 4 · answered Apr 10 '17 at 17:38

0

With the CSS you aready have you can add text-align: center to .maindiv to center its child elements (because they are inline-blocks).

answered Apr 10 '17 at 17:38

Johannes

64,305
18
73
130

How to center multiple inner divs horizontally?

4 Answers4