CODEWITHSUNDEEP
javascriptjquerycsscss-float
Faheem Alam
Faheem Alam

Reputation: 525

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

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

enter image description here

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

enter image description here

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

Upvotes: 5

Views: 6176

Answers (1)

lante
lante

Reputation: 7346

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.

Upvotes: 11

Related Questions