CODEWITHSUNDEEP
css
Christian
Christian

Reputation: 43

Centering the form inside div

How can I get the form centered, aligned with the submit button underneath it inside div? http://www.magnixsolutions.com/dev/test/test.html

.containerForm {
    padding-top: 20px;
    text-align: center;
    width: 250px;
    float: right;
    padding-right: 65px;    
}
.containerSecuImgs {
    text-align: center;
    width: 250px;   
}

Also the two images underneath will not let me move up little bit after putting padding-bottom: 20px; What did I do wrong?

Upvotes: 0

Views: 4365

Answers (3)

pollaris
pollaris

Reputation: 1321

add this class to div:

.centerxa {
    position: absolute;
    left: 50%;
    height: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

Upvotes: 0

Prasanth K C
Prasanth K C

Reputation: 7332

Applying margin: 0px auto; will position html elements to the center of the browser window.

Try out adding this to your css:

.well label {
  margin: 0px auto;
}

Hope it will help you to solve the center aligning issue

Upvotes: 2

LeonardChallis
LeonardChallis

Reputation: 7783

Wrap the label and input groups with a wrapper element (such as a div), and give that a margin of 0 auto to center it. Inside that wrapper element you can float your labels and inputs as needed.

Here's an example I knocked up for you: http://jsfiddle.net/BqEa8/

Upvotes: 4

Related Questions