CODEWITHSUNDEEP
htmlcssformsalignmentmargin
Hiigaran
Hiigaran

Reputation: 831

Centering a form, but maintaining alignment of its contents

I have a three-column page. Each column is a div with the following styles:

.Row1 {
    text-align:center;
    display:inline-block;
    vertical-align:top;
    padding:0.5%;
    width:31.5%;
}

The HTML is as follows:

<div class="Row1">
    <h2>Header</h2>
    <br />
    <form>
        Form stuff goes here
    </form>
</div>

My form consists of nothing more than a text field, a few radio buttons, and a submit button. Problem is, putting the form into the above code will give me a centered form, with the text field, radio buttons, and submit button also aligned in the center.

What I am trying to do is to just center the form itself (as a container), but keep everything aligned to the left.

I have tried wrapping the form in a div that is text-aligned centrally, and the form style set to left align, but that didnt work. The auto margin thing didn't work, either, whether it was on the wrapping div, or on the form, without the wrapping div (that is, an extra div. the Row1 div always remains).

EDIT: http://jsfiddle.net/pJwqe/

Upvotes: 0

Views: 1803

Answers (2)

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

Hope this fiddle link will work for you. I have done the following changes in your css

.midAlign form {
border: 1px solid #C2C3C0;
margin: 0 auto;
padding: 10px;
width: 155px;
}

Upvotes: 0

webketje
webketje

Reputation: 10976

text-align is not a property to 'align' divs or forms; instead, as it says, it aligns text. If you want to center a block-level element, you'll have to use margin. The default way to center a single element with margin is to set it , for example for a top-level container, to margin: 0px auto 0px;.

If you want a lay-out with 3 columns, I'd rather think you'd want something like this. You can style the margins of your divs by setting margin-left or margin-right, then style the first/last element with advanced selectors (so you don't have a margin-left for your first element, or a margin-right for your last).

As you can see, the forms are now centered, but their content is not. (You need to give your forms a width, else they will fill the containing block by default if they have content).

NB: It might be relevant in the rest of your code, but in this test-case vertical-align does nothing.

Upvotes: 1

Related Questions