HTML CSS Form - How to center the form on the page?


Tags: html,css,forms,margin

Problem :

I made a form and I am trying to center it on page but it doesn't work. I tried applying these 2 CSS to it but it didn't work.

form{margin: 0 auto;}

form{margin: auto;}

I also tried enclosing the form into div.container and applying same CSS to it but still nothing.

But this works:

{margin: 0 250px 0;}

Form here



Solution :

You need to do two things to achieve this:

1) Change inline-block display on the form to be block.
2) Fix the width (you currently have it as auto).

Demo: http://jsfiddle.net/bMf9M/2/


Or if you don't want to fix the form size, you can use text-align: center (Thanks @donderpiet)

Demo: http://jsfiddle.net/bMf9M/4/


    CSS Howto..

    How to have different table styles in CSS

    DOM How to add two divs (with jQuery inside them) next to each other?

    How do I get an element to always occupy a specific percentage of its parent element, even when the browser is resized?

    How to default toggle to open using css/jquery?

    Show a gif image over a section to take up the space

    CSS: How to position divs 2 by 2

    How to set gulp autoprefixer that it will be prefix css when I save my project

    how to display data in html

    HTML: How to style each table cell in a column via CSS?

    How can I use .htaccess to send distant expiry headers on CSS and JS files?

    How to get custom css to load after richfaces?

    How do I display content in a way like UICollectionView on the web?

    How to make JqueryUi Slider vertical-align middle?

    How to get the navigation element to have horizontal lines after each nav element in css

    CSS: How to align buttons and text horizontally

    how to apply jquery ui/css to forum field

    How to align text vertically

    How to detect CSS is turned off with PHP?

    How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

    How to add a hover transition effect on the navigation?

    How can I force a table cell onto a new row

    How do I make the link in the back div clickable

    How to prevent fixed image from scrolling down?

    How to apply default CSS styling to all HTML pages

    How to select a non unique element through CSS

    How to programmatically download all contents of webpage, not only the source code in Java

    How to determine if a device is in portrait or landscape mode using CSS

    How to center the buttons and make them same size

    CSS : How to make two column right fluid left fluid depend on right

    how to make textarea looks like input[text] on form invalid