javascript - how to horizontally center multiple div's in a parent div - Stack Overflow

admin管理员组

文章数量:1277902

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

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

• javascript
• jquery
• css
• css-float

Share Improve this question Follow edited Jan 6, 2015 at 15:42 lante 7,34644 gold badges3838 silver badges5858 bronze badges asked Jan 6, 2015 at 15:30 Faheem AlamFaheem Alam 52544 silver badges2020 bronze badges 2

• 2 switch from float, to display: inline-block, and text-align: center to the parent, and you should be good to go – RGLSV Commented Jan 6, 2015 at 15:33
• To avoid browser issues, make sure you don't leave any white space between divs when using inline-block. – Jason Williams Commented Jan 6, 2015 at 15:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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.

本文标签： javascripthow to horizontally center multiple div39s in a parent divStack Overflow