how to horizontally center multiple div's in a parent div

Question

I am trying to create a control which contains multiple div's and all the div's are horizontally center align. as shown below.

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

but ever div's are aligh left to their parent.

I have one ulternative solition to use javascript to position every div but I want to use css. Is it possible to achive this using css.

Thanks in advance

Answer 1

This may do what you are trying to:

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 the fiddle.