Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Centering all HTML form elements using CSS

Tags:

html

css

forms

How do you center all form label and input fields using CSS?

How would you do this for a form with label text (block) on top of the input field?

#fieldset label {
    display: block;    
}

#fieldset input {
    font-size: 0.8em;
    height: 1.2em;
    width: 15em;
}
like image 688
yos Avatar asked Nov 26 '09 11:11

yos


1 Answers

As Boldewyn and Ben said, text-align will centre inline items (such as spans). To centre block elements (such as divs and forms and paragraphs), give it a width and set margin-right and margin-left to auto.

It's important to understand the difference between block and inline elements.

like image 136
darasd Avatar answered Sep 30 '22 05:09

darasd