Center multiple elements in a div using css

Question

I am new to html and css and I am 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 am trying to center the red circles (horizontally and vertically) inside the black boxes, but I cannot handle it. I tried using "text-align" and set the left and right margin to auto, but this does not work. I also cannot use the “absolute” positioning, because I have a fixed menu bar at the top of the page, and this gets destroyed if you scroll.

Any help would be greatly appreciated. Thanks

Answer 1

it is very easy to understand with the same code that you provide, you just need to provide the parent element text-align: center; and position: relative;

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

then set margin for children : 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 field between them, change margin: 10px auto; - : 10px 40px;

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

Answer 2

I do not think that you can only achieve this with CSS without hardcoding values.

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

EDIT:

I am 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 the 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 over the whole line and see how many circles we have, and multiply their number by the width of the circle so that we can subtract the left / right addition.

Answer 3

using flexbox, this is by far the best option, but now it is supported, for example, <10 http://caniuse.com/#feat=flexbox

If you need to work with browsers that do not support flexbox, horizontal alignment is easy, you can do this by adding an attribute 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 vertical alignment, I can make it work using percentages for the height of the circle, and I change the window size property and the upper and lower margins, so the percentage value makes sense and assigns a position relative to the circle class, so we can use the upper property using half the remaining percentage ex: circle height = 70%, circle above = 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; } 

remember that with this approach, if you increase the height of the .row class, the height of the circle will increase automatically.

Hope this helps!

Answer 4

Another simple solution using the display: table property:

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; } 

Script Link

Answer 5

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

For vertical alignment: 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 */ }