CODEWITHSUNDEEP
htmlcss
Lolly
Lolly

Reputation: 36452

center div tags inside parent div

I have two div tags inside a parent div. I want to display the two divs in same line and centered. Below is the html code.

<div id="parent">
    <div id="addEditBtn" style="display:inline-block; vertical-align: middle; width:20px; cursor:pointer;" class="ui-state-default ui-corner-all"> <span class="ui-icon ui-icon-pencil"></span></div>

    <div id="deleteBtn" style="display:inline-block; vertical-align: middle; width:20px; cursor:pointer;" class="ui-state-default ui-corner-all"> <span class="ui-icon ui-icon-trash"></span></div>
</div>

I tried with "display:inline-block; vertical-align: middle;" but its getting aligned left. Please help me out to centered the div tags inside the parent div.

Upvotes: 0

Views: 882

Answers (3)

user3446322
user3446322

Reputation: 129

please add css

    #addEditBtn,#deleteBtn {
    display:table;
margin:0 auto;
width:48%;
    }

Upvotes: 1

mddw
mddw

Reputation: 5590

You'll need another level of nested divs.

First level is inline-block and width:50%, second level is display:block, width:20px and margin:0 auto;

edit :

yeah, text-align: center on the parent div should work too : http://jsfiddle.net/ZGeN8/ , but I prefer my answer because it'll be easier to adapt to IE6/7

Upvotes: 0

Quentin
Quentin

Reputation: 944538

When you display: inline-block; and element, it is treated like an image or a text character for the purposes of centring. 

#parent {
    text-align: center;
}

See a live demo.

Upvotes: 0

Related Questions