CODEWITHSUNDEEP
cssformshtmlcenteralignment
frequent
frequent

Reputation: 28493

how to CSS center a div, which is the child of a form element?

I'm not sure what I'm doing wrong, but I have been trying forever to center this div:

<form>
    <div class="submitter">
        <div data-role="controlgroup" data-type="horizontal">
            <input type="submit" value="submit" data-theme="e" />
            <input type="reset" value="reset" />
        </div>
    </div>
</form>

There is more stuff in the form, but I'm just interested in centering the controlgroup.

I have tried everything I know from text-align to margin: 0 auto but I can't get it to work. In my desparation, I set a fix width to the form and added the submitter element, which I'm expanding to 100% and then setting the controlgroup to display:inline-block but I can't get it to work...

Question:
How to place the controlgroup in the center of the form?

THANKS!

EDIT:
here is my form enter image description here

Both columns are ul elements, width:49%;display:inline;

Upvotes: 0

Views: 1539

Answers (3)

Anele
Anele

Reputation: 162

I think you should first target the parent div...

Here is my Solution on jsFiddle

Upvotes: 1

Kyle
Kyle

Reputation: 67194

http://jsfiddle.net/Kyle_Sevenoaks/fNYb4/

Using margin: 0 auto; on the inner div using an attribute selector seems to work.

div[data-role="controlgroup"]
{
    width: 50%;
    margin: 0 auto;
}

Remember that the parent element needs a set width as well as the element to be centered.

Upvotes: 2

user1317647
user1317647

Reputation:

Margin: 0 auto; works for me ( you should set width to your block beofre using margin:0 auto; )

CSS:

<style>
.one {
border:1px solid;
width:300px;
margin:0 auto;
}
</style>

HTML:

<form>
    <div class="submitter">
        <div data-role="controlgroup" data-type="horizontal" class="one">
            <input type="submit" value="submit" data-theme="e" />
            <input type="reset" value="reset" />
        </div>
    </div>
</form>

Upvotes: 2

Related Questions