sofboy sofboy - 6 months ago 8
HTML Question

Center 2 rows of 5 collums next to each other

I'm trying to center 2 rows of 5 colums 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>




Answer

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>