Centre multiple elements within div using css

Question

I'm new to html and css and I'm trying to create a website, part of the code is here:

HTML:

<div class="row">
    <div class="circle"></div>
</div>
<div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<div class="row">
    <div class="circle"></div>
</div>

CSS:

.circle
{
border-style: solid;
border-color: red;
width: 70px;
border-radius: 40px;
float:left;
margin: 2px;
}

.row
{
border-style: solid;
border-color: black;
height: 100px;
width: 700px;
margin: 10px;
}

http://jsfiddle.net/ubd9W/

I'm trying to centre red circles (horizontally and vertically) within the black boxes but I can't seem to manage it. I've tried using 'text-align' and setting the left and right margin to auto but that doesn't work. I also can't use 'absolute' positioning because I have a fixed menu bar at the top of the page and that gets ruined if you scroll.

Any help will be greatly appreciated. Thanks

Answer 1

For horizontal aligning: use text-align: center; + display:inline-block;

For vertical aligning: use line-height + vertical-align: middle;

FIDDLE

CSS

.circle
{
    border-style: solid;
    border-color: red;
    height: 70px;
    width: 70px;
    border-radius: 40px;
    margin: 2px;
    display:inline-block; /* for horizontal alignment */
    vertical-align: middle; /* for vertical alignment */
}

.row
{
    border-style: solid;
    border-color: black;
    height: 100px;
    line-height: 100px; /* for vertical alignment */
    width: 700px;
    margin: 10px;
    text-align: center; /* for horizontal alignment */
}

Answer 2

very simple to understand with the same code you provide you just need to give the parent element a text-align:center; and a position:relative;

    .row{
        border:4px solid black;
        height: 100px;
        width: 700px;
        margin: 10px;
        text-align:center;
        position:relative;
    }

then set the children margin:10px auto; and display:inline-block;

    .circle{
        border:4px solid red;
        height: 70px;
        width: 70px;
        border-radius: 40px;
       position:relative;
        margin:10px auto;
       display:inline-block;
    }

or if you want more margin between them change margin:10px auto; to margin: 10px 40px;

demo: http://jsfiddle.net/ubd9W/14/

Answer 3

Another simple solution with the display:table property as well:

HTML

<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
<div class="row">
    <div class="wrapper">
        <div class="circle"></div>
    </div>
</div>

CSS to add:

.wrapper {
    display: table;
    margin: auto;
}

Link to Fiddle

Answer 4

using flexbox it's by far the best option, but it's now supported by ie<10 http://caniuse.com/#feat=flexbox

If you need it to work on browsers that doesn't support flexbox, the horizontal alignment is easy, you can do it adding a the attributes display: inline on .circle and text-align: center on .row.

http://jsfiddle.net/BTh2t/2/

.circle
{
    border-style: solid;
    border-color: red;
    height: 70px;
    width: 70px;
    border-radius: 40px;
    display: inline-block;
    margin: 2px;
}

.row
{
    border-style: solid;
    border-color: black;
    height: 100px;
    width: 700px;
    margin: 10px;
    text-align: center;

}

For the vertical alignment i could make it work using percentages for the height of the circle and i change the box-sizing property and the top and bottom margin, so the percentage assigned make sense and assign position relative to the circle class so we it can use the top property using the half of the remaining percentage ex: circle height = 70%, circle top = 15%

http://jsfiddle.net/BTh2t/3/

.circle
{
    border-style: solid;
    border-color: red;
    height: 70%;
    width: 70px;
    border-radius: 40px;
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    position: relative;
    top: 15%;
    -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

.row
{
    border-style: solid;
    border-color: black;
    height: 100px;
    width: 700px;
    margin: 10px;
    text-align: center;

}

keep in mind that with this approach if you increase the height of the .row class the height of the circle will increase automatically.

I hope it helps!

Answer 5

I don't think you can achieve this only with CSS, without hardcoding values.

You can use flexbox http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ (not so good browser support) or a JavaScript solution.

EDIT:

I'm using jQuery.

for three circles:

var rowWidth = jQuery('.row').width();
var circleWidth = jQuery('.circle').width();
var equalSpace = rowWidth -  (3*circleWidth);
jQ('.row').css("padding-left", equalSpace + "px").css("padding-right", equalSpace + "px");

for a dynamic number of circles:

var rowWidth = jQuery('.row').width();
var circleWidth = jQuery('.circle').width();
jQuery('.row').each(function(){
    var circNumber = jQuery(this).children('.row').length; //this will give you the number of circles inside the current row.
    var thisWidth = rowWidth - (circNumber * circleWidth);
    jQ(this).css('padding-left', thisWidth + "px").css('padding-right', thisWidth + "px")
})

We iterate through all the row and see how many circles we have in them and multiply theyr number to a circle's width so we can substract the left/right padding.