Center 2 rows of 5 columns next to each other

Question

I'm trying to center 2 rows of 5 columns next to each other but it just does not work.

The code (https://jsfiddle.net/anhuxthz/):

body {
  overflow: hidden;
  margin: 40px 15px;
  font-family: Arial, sans-serif;
  font-size: 12px;
}
#distribution {
  position: absolute;
  margin-right: 10%;
  margin-left: 5%;
  border: 1px solid black;
  margin-bottom: 10%;
  width: 90%;
}
input {
  width: 10%;
  /*margin-left: 5.5%;*/
}
.imgCat {
  height: 15%;
  width: 15%;
  /*margin-left:1%;*/
}
span {
  font-weight: bold;
}
.group {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3px;
  margin-bottom: 3px;
  text-align: center;
}

<div id="distribution">
  <div class="group">
    <img src="~/Images/financiering.png" class="imgCat">
    <p>Algemene financiering</p>
    <input type="text" class="dFinan" value="0" readonly />
  </div>  
  <div class="group">
    <img src="~/Images/care.png" class="imgCat">
    <p>Zorg en opvang</p>
    <input type="text" class="dZorg" value="0" readonly />
  </div>
  <div class="group">
    <img src="~/Images/house.png" class="imgCat">
    <p>Wonen en ruimtelijke ordening</p>
    <input type="text" class="dWonen" value="0" readonly />
  </div>
  <div class="group">
    <img src="~/Images/police.png" class="imgCat">
    <p>Veiligheidszorg</p>
    <input type="text" class="dVeiligheid" value="0" readonly />
  </div>
  <div class="group">
    <img src="~/Images/culture.png" class="imgCat">
    <p>Cultuur en vrije tijd</p>
    <input type="text" class="dCultuur" value="0" readonly />
  </div>
  <div class="group">
    <img src="~/Images/financiering.png" class="imgCat">
    <p>Algemene financiering</p>
    <input type="text" class="dFinan" value="0" readonly />
  </div>  
  <div class="group">
    <img src="~/Images/care.png" class="imgCat">
    <p>Zorg en opvang</p>
    <input type="text" class="dZorg" value="0" readonly />
  </div>
  <div class="group">
    <img src="~/Images/house.png" class="imgCat">
    <p>Wonen en ruimtelijke ordening</p>
    <input type="text" class="dWonen" value="0" readonly />
  </div>
  <div class="group">
    <img src="~/Images/police.png" class="imgCat">
    <p>Veiligheidszorg</p>
    <input type="text" class="dVeiligheid" value="0" readonly />
  </div>
  <div class="group">
    <img src="~/Images/culture.png" class="imgCat">
    <p>Cultuur en vrije tijd</p>
    <input type="text" class="dCultuur" value="0" readonly />
  </div>
</div>

In total there are 10 divs, I want 2 rows with 5 divs next to each other — Souf, May 16 '16 at 16:19
I already tried it but couldn't get it quite right. It hasn't been aa good day, maybe tomorrow wil be better still thanks for the tip! — Souf, May 16 '16 at 16:28

Asons · Accepted Answer · 2016-05-16T16:36:02.257

Like this?

Here I made the .group div's display: inline-block and gave them the width of 20% (minus 6px to cover for the inline white space created by the markup)

html {
}
body {
    overflow: hidden;
    margin: 40px 15px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
#distribution {
    position: absolute;
    margin-right: 10%;
    margin-left: 5%;
    border: 1px solid black;
    margin-bottom: 10%;
    width: 90%;
}
input {
    width: 10%;
    /*margin-left: 5.5%;*/
}
.imgCat {
    height: 15%;
    width: 15%;
    /*margin-left:1%;*/
}
span {
    font-weight: bold;
}
.group {
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    width: calc(20% - 6px);        /*  added property  */
    display: inline-block;         /*  added property  */
}

<div id="distribution">

        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>Algemene financiering</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">

            <img src="~/Images/care.png" class="imgCat">
            <p>Zorg en opvang</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>

        <div class="group">
            <img src="~/Images/house.png" class="imgCat">
            <p>Wonen en ruimtelijke ordening</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/police.png" class="imgCat">
            <p>Veiligheidszorg</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/culture.png" class="imgCat">
            <p>Cultuur en vrije tijd</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>Algemene financiering</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">

            <img src="~/Images/care.png" class="imgCat">
            <p>Zorg en opvang</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/house.png" class="imgCat">
            <p>Wonen en ruimtelijke ordening</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/police.png" class="imgCat">
            <p>Veiligheidszorg</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/culture.png" class="imgCat">
            <p>Cultuur en vrije tijd</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
</div>

Could also be done using flex, and gave them the width of 20% (no need for the extra 6px here since no white space renders for flex items)

html {
}
body {
    overflow: hidden;
    margin: 40px 15px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
#distribution {
    position: absolute;
    margin-right: 10%;
    margin-left: 5%;
    border: 1px solid black;
    margin-bottom: 10%;
    width: 90%;
    display: flex;         /*  added property  */
    flex-wrap: wrap;       /*  added property  */
}
input {
    width: 10%;
}
.imgCat {
    height: 15%;
    width: 15%;
}
span {
    font-weight: bold;
}
.group {
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    width: 20%;            /*  added property  */
}

<div id="distribution">

        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>Algemene financiering</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">

            <img src="~/Images/care.png" class="imgCat">
            <p>Zorg en opvang</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>

        <div class="group">
            <img src="~/Images/house.png" class="imgCat">
            <p>Wonen en ruimtelijke ordening</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/police.png" class="imgCat">
            <p>Veiligheidszorg</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/culture.png" class="imgCat">
            <p>Cultuur en vrije tijd</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>Algemene financiering</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">

            <img src="~/Images/care.png" class="imgCat">
            <p>Zorg en opvang</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/house.png" class="imgCat">
            <p>Wonen en ruimtelijke ordening</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/police.png" class="imgCat">
            <p>Veiligheidszorg</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/culture.png" class="imgCat">
            <p>Cultuur en vrije tijd</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
</div>

score 2 · Answer 2 · edited May 23 '17 at 12:22

Encapsulate each group of 5 divs in a "row" div, and configure each "group" to be float:left.

Note that when you configure the group divs to be float:left, they lose their height. To fix that, use overflow:hidden on their parent div. See What is a clearfix?

CSS:

.group {float:left;width:19.5%;}
.row {overflow:hidden;}

Something like this:

jsFiddle Demo

or

html {
}

body {
    overflow: hidden;
    margin: 40px 15px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
.group {float:left;width:19.5%;}
.row {overflow:hidden;}
input{max-width:90%;}

<div id="distribution">
 <div class="row">
        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>Algemene financiering</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">
            <img src="~/Images/care.png" class="imgCat">
            <p>Zorg en opvang</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/house.png" class="imgCat">
            <p>Wonen en ruimtelijke ordening</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/police.png" class="imgCat">
            <p>Veiligheidszorg</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/culture.png" class="imgCat">
            <p>Cultuur en vrije tijd</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
  </div> <!-- .row -->

  <div class="row">
        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>Algemene financiering</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">
            <img src="~/Images/care.png" class="imgCat">
            <p>Zorg en opvang</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/house.png" class="imgCat">
            <p>Wonen en ruimtelijke ordening</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/police.png" class="imgCat">
            <p>Veiligheidszorg</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/culture.png" class="imgCat">
            <p>Cultuur en vrije tijd</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
  </div><!-- .row -->
</div><!-- #distribution -->

score 1 · Answer 3 · answered May 16 '16 at 16:20

Have you tried the table?

<center>
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
</tr>
</table>
</center>

score 1 · Answer 4 · answered May 16 '16 at 16:25

1

(edited: 5 x 2, not the other way round)

Add this CSS, it should do what you want (using flex and wrap)

#distribution {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
.group {
  width: 20%;
}

fiddle: https://jsfiddle.net/b746Lz7m/2/

answered May 16 '16 at 16:25

Johannes

64,305
18
73
130

score 1 · Answer 5 · answered May 16 '16 at 16:25

I recommend flex boxes: https://jsfiddle.net/anhuxthz/3/

Wrap your columns in a column div and add this code to the css:

#distribution {
  display: flex;
  align-items: center;
}

.column {
  flex-direction: column;
  align-items: center;
  margin: auto;
}

and you should be all set!

score 1 · Answer 6 · answered May 16 '16 at 16:29

I updated your fiddle for you.

https://jsfiddle.net/anhuxthz/6/

.group {
  width: 700px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3px;
  margin-bottom: 3px;
  text-align: center;
}

.item {
  float: left;
}

You need to group your items. And apply an absolute width to that group - this is the only way you can do margin: 0 auto; to center align it in the parent. The items then can be aligned by floating.

Center 2 rows of 5 columns next to each other

6 Answers6