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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...