submit button in html and css

**ravi951** · Aug 3rd, 2011, 04:50 AM

hi all,
i have created one simple login form using html an css.in that login form how to change the position of the submit button to center, right and left.
presently it is left now....
where to change the position......
below is my html code..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Inline Form Validation Demo</title>
<link rel="stylesheet" type="text/css" href="messages1.css" />
<script type="text/javascript" src="messages1.js"></script>
</head>
<body>
<div id="wrapper">
  <form name="form" id="form" class="form" action="success1.html" onsubmit="return validate(this)" method="post">
    <label for="name">User Name:</label>
    <input type="text" name="realname" id="name" />
	<span id="realnameerror"></span>
    
	<label for="email">Email Id:</label>
    <input type="text" name="email" id="email" />
	<span id="emailerror"></span>
    
	<label for="password">Password:</label>
    <input type="password" name="password" id="password" />
	<span id="passworderror"></span>
	
    <label for="repassword">Retype Password:</label>
    <input type="password" name="password2" id="password2" />
	<span id="password2error"></span>
	
	<label for="phoneno">Phone no:</label>
    <input type="text" name="phoneno" id="phoneno" />
	<span id="phonenoerror"></span>
	
	<input type="submit" value="Submit" class="submit" />
  </form>
</div>
</body>
</html>

below is the css for it.....

Code:

* 
{
 margin:0; 
 padding:0;
}

body 
{
  font:12px Verdana, Arial, Helvetica, sans-serif; 
  color:black;
}

#wrapper 
{
  width:700px; 
  margin:50px auto;
}

.form 
{
  float:left; 
  padding:10px 10px 10px 10px; 
  background:lightblue; 
  border:2px solid white;
}

.form label 
{
  float:left; 
  width:130px; 
  padding:10px 10px 0 0; 
  font-weight:bold;
  text-align:right;
  clear:left;
}

.form span
{
  float:left;
  margin-top:1em;
  margin-left:0.5em;
  color:red;
}

.form select 
{
  float:left; 
  width:146px; 
  margin-top:10px;
}

.form input 
{
  float:left; 
  margin-top:10px;
}

.form .submit 
{
  clear:both;
}

 #msg 
{
  display:none; 
  position:absolute; 
  z-index:200; 
  background:url(images/msg_arrow.gif) left center no-repeat; 
  padding-left:7px;
}
#msgcontent 
{
  display:block; 
  background:yellow; 
  border:2px solid orange; 
  border-left:none; 
  padding:5px; 
  min-width:150px; 
  max-width:250px;
}

**techgnome** · Aug 3rd, 2011, 07:00 AM

create a submit class in your CSS and set the align to center...

-tg

**rj_yan31** · Aug 7th, 2011, 06:28 PM

try this one.

Code:

<center><input type="submit" value="Submit" class="submit" /></center>

**Nightwalker83** · Aug 7th, 2011, 09:59 PM

Originally Posted by rj_yan31

try this one.

Code:

<center><input type="submit" value="Submit" class="submit" /></center>

A better way would be to leave out the <center></center> tags and use either the name or class attribute to move the button via code in the css file.

**PBertie** · Aug 8th, 2011, 04:27 PM

Can I ask why you are using float in your CSS?
Float is not a normal way to align things, its special because it allows elements to overlap. Like a picture in a column of text in a book.

If you want to keep the floats on your other elements you will need to change your submit class to the following because the .form input {} also effects the submit button.

Code:

.form .submit 
{
  float:none;
  margin-left: auto;
  margin-right: auto;
}

Also <center> is deprecated so should be avoided.

**penagate** · Aug 8th, 2011, 07:34 PM

Instead of adding a class, use an attribute selector:

Code:

.input[type='submit']
{
  margin: 0 auto;
}

I don't know off-hand if the margin trick works on a submit button.

**kows** · Aug 9th, 2011, 12:47 PM

It doesn't, as far as I recall (even when given an explicit width).

To center a submit button, I always just apply text-align to its parent element. Something like:

HTML Code:

<div class="submit">
  <input type="submit" value="Go" />
</div>

Code:

.submit {
  text-align: center;
}

**hafizfarooq** · Sep 2nd, 2011, 11:33 AM

Create a DIV and use its Top/Bottom/Left properties to align the button

Thread: submit button in html and css

Thread Tools

Display

submit button in html and css

Re: submit button in html and css

Re: submit button in html and css

Re: submit button in html and css

Re: submit button in html and css

Re: submit button in html and css

Re: submit button in html and css

Re: submit button in html and css

Posting Permissions