Jump to content
cinque8

How do I move my form to the center of the page?

Recommended Posts

How much experience do you have with CSS?

Share this post


Link to post
Share on other sites

Study inline/inline-block elements, and block elements, the difference determines how you will centre them. One requires a width and margin, the other acts like text, so what would you use to centre text?.

Share this post


Link to post
Share on other sites
<!DOCTYPE HTML>
<html>
<head>
  <style>
    #myForm{
    max-width:390px;
    width:100%;
	height:300px;
    margin:0 auto;
    padding-left:5px;
	padding-right:5px;
	padding-top:5px;
	
    background-color:#f1f1f1;
    }
</style>
</head>
<body>
<!--make a div  giv the div a name myform-->

  <div id ="myForm"><form action="" method="post">
  <input type="text" name="whatever" size="50%"  placeholder="something"><br/>
  <input type="text"name="name" size="50%"placeholder="whatever"><br/>
  <textarea name="media" rows="10"cols="52%"placeholder="hope this helps"></textarea><br/>
  <input type ="submit" name = "submit" value = "submit">
 </form></style>
</div>
</body>
</html>

im sure there a better way to do this 

Edited by codeminer

Share this post


Link to post
Share on other sites

Setting a max-width and margin is actually the normal way to do it.

You don't need to set the width to 100% though, since they already do that naturally.

Share this post


Link to post
Share on other sites

i just wanted to add to it  makeing it some what responsive, without getting to much involved  adding rem ,em, vw and vh

i forgot to add this too the header  <meta name="viewport" content="width=device-width, initial-scale=1">

cheers

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×