How can I align my form to the center of the background? CSS


Tags: css

Problem :

I have the following form: http://imgur.com/8uV4729

with this CSS:

#myForm {
    margin: auto;
    width: 600px;
}
#myForm form {
    background-color: #E0E0E0;
    text-align: center;
    padding: 5px;
}
#myForm table {
    text-align: left;
}

here is a jsfiddle link: https://jsfiddle.net/3d44j5to/4/

How could I align the form table so that it is in the middle of the screen and the grey background? How would I also go about putting 1 line of space between the form and the submit/reset button?



Solution :

enter image description hereThe table will take up the specified width, and the remaining space will be split equally between the two margins

table{
    margin: auto;
    width: 53%;
    border: 3px solid #73AD21;
    padding: 15px;
}

I'm also remove the size attrbut from th adress input

<input type="text" id="homeaddress" name="homeaddress"  />

I update your jsfiddle here https://jsfiddle.net/s3mcrk39/8/


    CSS Howto..

    How can I show a loading screen while a really large image is loading?

    How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr

    How to vertically center content in before or after in CSS

    how to reduce the size of all component in sencha application

    Prevent div from showing after slideUp() - jQuery

    Anyone know how Atlassian sizes the height of the splitter div in Confluence?

    How to increase the width size of JQuery UI Tooltip by its default value?

    CSS - How to control the gap between background image and container

    How do you create a link out of circular text with JavaScript and CSS?

    How to vertically align text to the right of some text using css? [closed]

    How to have full page that is not a background img or fixed positioned?

    How do I go about dynamically splitting a body of text into two even columns with plain Javascript (no JQuery)?

    Facebook Like Button - how to disable Comment pop up box?

    How to know if an element is rendered?

    How to put space between figure in image?

    Show background image if container content is small (responsive)

    How to bounce to top with button on image with CSS

    How to add vertical scrolling to Windows 8 app in snapped view

    How to formatting a simple
      in columns and bolding the first item on its own line

    How can I center my text on top of an image, given that it's responsive?

    how to Load a css file for html page android web view

    How to add style to android app

    How to create a pop up animation with a modal using css?

    How to make my first-child in css work properly?

    How to position button in the middle

    How do you create multiple box-shadow values in LESS CSS

    How to control the expandability of textarea from width perspective

    How does max-width property make images responsive?

    How can I properly add CSS and JavaScript to an HTML document?

    How do I detect that facebook app is loading page to change CSS?