How to horizontally center multiple divs in a parent div

Question

I am trying to create a control that contains multiple divs and all divs have horizontal center alignment. as shown below.

I was able to float each div using the float:left css property. which give something like this

but divs always stay at home.

I have one alternative solution to use javascript to place each div, but I want to use css. Is it possible to achieve this with css.

Thanks in advance

Answer 1

This can do what you are trying to do:

HTML:

 <div class="parent"> <div class="child">Element 1</div> <div class="child">Element 2</div> </div> 

CSS

 .child { display: inline-block; } .parent { text-align: center; } 

and a violin .