提交按钮中心问题

时间:2016-11-21 03:47:58

标签: html css

我需要帮助尝试集中我的提交按钮。最近我刚才有一个关于在我的页脚中居中的问题,现在我正在努力将我的提交按钮居中...我是HTML和CSS的新手,所以我很努力地理解一切,这就是为什么这个网站帮助那么多,因为这里的每个人都有非常好的想法!

就像我说我遇到的问题是试图将我的提交按钮集中在响应式设计中。

如果你们有任何想法,我会非常感激!谢谢!

/*Mobile*/

.button{	
  position:relative;
  bottom: 5%;
  width: 100%;
  display: block;
  width: 200px;
  height: 50px;    
  left: 0;
  right: 0;  
}

/*Rest of Mobile Code*/
figure.stayssame {
  width: 100%;
}
figure video {
  width: 100%;
  height: 80%;
}
p{
  padding: 2%;
}

.video-txt{
  position: absolute;
  top: 30%; 
  z-index: 9; 
  color: #FFF; 
  width: 100%;  
  text-align: center; 
  font-size: 40px; 
}
object {
  position: absolute;
  left: 0%;
  top: -5%;
  z-index: 10;
  width: 15%; 
}

/*ALL CODE FROM DESKTOP*/
figure.adjustable {
  width: 29%;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  margin: 0 0 100px; /* bottom = footer height */
  font-family: 'Inconsolata', monospace;
  /*font-family: 'Courier New', sans-serif;*/
  font-weight: 300;
  font-size: 20px;
  line-height: 1.4em;
}
.squish{
  margin-right:125px;	
}
.text{
  padding:5px;	
}
header {
  position: fixed;
  z-index: 1000;
  width: 100%;
  top: 0px;
  letter-spacing:1px;
  line-height: 55px;
  padding:9px;
  word-spacing:5px;
}
header, h1, h2{
  font-family: 'Orbitron', sans-serif;
}
.space{
  padding: 5px;
  color:white;
}
nav{
  float:left;	
  width:100%;
}
nav ul li.active a {
  background-color: none;
  color: white;
  text-decoration:none;
}
nav ul li a:hover {
  color:#00E3FF;
}
nav ul li a:visited {
  text-decoration:none;	
}
form{
  padding-left: 20%
}

/* header tags */

h1 {
  text-align: center;
  color:#013397;
  font-size: 40px;
  padding-top:50px;
}

h2{
  text-align: center;
  color:#00E3FF;
  font-size: 30px;
  margin: 5px;
  padding:20px;
}

p{
  text-align: left;
}

.clearfix:after {
  content:" ";
  display:block;
  clear:both;
}

#box{
  background-color:#94DBEC ;
}

hr.style2 {
  border-top: 3px double #00E3FF;
  width:300px
}
section{
  width: 85%;
  margin-left: auto;
  margin-right:auto;
  margin-top: 35px;
}


img.adjustable{
  width: 100%;
  max-width:100%;
  height:auto;
  /* max-width: 400px;
  max-height: 400px;*/
  margin: 1em  ;
  /*width: 90%;
  margin:5%;*/
}
#inner{
  height: 100px;
  padding:15px 0;	
}
#container{
  height:100%;
}
.imgbox5{
  padding-right:30px;
  padding-left:0px;
}

.imgbox4{
  padding-right:30px;
  padding-left:0px;
}

.imgbox3{
  padding-right:30px;
  padding-left:0px;
}


.imgbox2{
  padding-right:30px;
}

.imgbox{
  padding-right:30px;
  padding-left:0px;
}

#firstpara{
  background-color:#5E5757;
  color: white;
}

#secpara{
  background-color:#5E5757;
  color: white;
}

#thirdpara{
  background-color:#5E5757;
  color: white;
}

#fourthpara{
  background-color:#5E5757;
  color: white;
}
#primary{
  background-color:#5E5757;
  color: white;
}

#enroll{
  margin:0;
  padding:0;	
}
/*section{
text-align: center;
width: 100%;

}*/

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  padding-bottom: 2%;
  background-color:#670809;
  font-family: 'Inconsolata', monospace;

  /* text */

  padding-left: 10px;
  padding-top: 15px;
  color: #ffffff;
  font-size: 15px;
  text-align:center;
}

a { color: white; }

a, a:active { 
  color: white;
  text-decoration:none;
}
.side{
  left-margin:10px;
  right-margin:10px;	
}

object{
  position: absolute;
  top:350px;
  left:100px;
  height: 100px;
  width:200px;
  z-index:2000;
}

#headline{
  text-align: center;
  position: absolute;
  top:10%;
  left:35%;
  color:#00E3FF;
  line-height:20px;
  font-family: 'Orbitron', sans-serif;
  word-spacing: 1px;
  font-size:12px;
}
#value{
  background-color:#5E5757;
  color: white;
  width:90%;
  margin-left: auto;
  margin-right:auto;
  margin-top:2%;
}
#title{
  color:white;
  text-align:center;
  padding-top:10px;
}
img{
  width: 100%;
  display: block;
}
.msum{
  position: absolute;
  bottom: 5%;
  width: 100%;
  display: block;
  width: 200px;
  height: 50px;
  left: 0;
  right: 0;
  margin: 0 auto; 
}

span{
  font-size: 14px;	
}

.smaller{
  font-size: 16px;
}

/*NAV BAR*/

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html{font-size: 62.5%; font-family: 'Open Sans', sans-serif;}
body{font-size: 1.6rem; min-height: 100vh;}
h1{font-size: 3rem; margin-bottom: 1rem;}
h2{font-size: 1.6rem;}
header{position: relative;}
main{padding: 2rem;}

/***************** NAVIGATION ********************/
nav ul{
  display: flex; 
  flex-wrap: wrap; 

  margin: 0 auto;		
  background: #670809;
}
nav ul,
nav li{
  flex: 1;	
}
nav li:last-child{border-bottom: none;}
nav a{
  text-decoration: none;
  color: inherit;
  display: block;
  font-size: 1.8rem;
}
nav a:hover{
  background: /*#adacac*/#555;
  color: #fff;
}
nav li{
  position: relative;
  line-height: 50px;
  color: #fff;
  text-align: center;
}  
nav input,
nav label{
  display: none;
  width: 36px; 
  height: 36px; 
  background: #555; 
  color: #fff; 
  text-align: center; 
  line-height: 36px;
  font-size: 1.6rem;
  border-radius: 4px;
} 
nav label{position: absolute; top: 8px; right: 8px; transition: .4s;}
nav label:hover{cursor:pointer;}
nav label:before{
  font-family: FontAwesome;
  font-size: 24px;
  content: "\f0c9";
  text-align: center;
}

/*************** MEDIA QUERIES *******************/

nav ul{
  transform: translateY(0);
  box-shadow: 0 0 5px rgba(0,0,0, .7);
  transition: all .5s;
}
nav li{
  flex: none; 
  width: 100%;
  border-bottom: solid 1px #777;
} 
nav input[type="checkbox"]:checked + ul{
  transform: translateY(-100%);
  width: 100%;
  background: #999;   
  transition: all .5s;
}
nav label{display: block;}  
nav input[type="checkbox"]:checked + ul li:nth-child(1){
  background: #777; 
  color: #fff;
}  

#css-toggle-menu{
  float:right;
  margin: 10px;
}
<form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix ">
  <section class="clearfix">
    <fieldset><legend>
      <i class="fa fa-user" aria-hidden="true"></i>Personal Information
      <hr class="style2">
      </legend>
      <label>
        <span></span>
        <input name="first_name" type="text" value="" placeholder="First Name" autofocus required/>
      </label>
      <label>
        <span></span>
        <input name="last_name" type="text" value="" placeholder="Last Name" autofocus required/>
      </label>
      <label>
        <span> </span>
        <input name="date_of_birth" type="date" value="" placeholder="Date of Birth" autofocus required/>
      </label>

      <label>
        <span></span>
        <input type="number" name="quantity" min="1" max="6" autofocus placeholder="number of years until next degree"></label>

      <label>
        <span></span>
        <input name="level_of_education" type="hidden" value="" placeholder="level of education" autofocus required/></label>
      <select class="bottom" name="education_level">
        <option value="High School">High School</option>
        <option value="Undergraduate">Undergradute</option>
        <option value="Graduate">Graduate</option>
      </select>
    </fieldset>
    <fieldset>
      <legend>
        <i class="fa fa-envelope-o" aria-hidden="true"></i>
      Contact Information  <hr class="style2">
      </legend>

      <label>
        <span></span>
        <input class="ghost-input" name="email" value="" type="email" placeholder="youremail@email.com" autocomplete="off" />
      </label>

      <label>        
        <span></span>
        <input name="phonenumber" value="" type="tel" placeholder="763-858-9564" />
      </label>

      <label>
        <span></span>
        <input name="website" value="" type="url" placeholder="https://yourwebsite.com"/>
      </label>
    </fieldset>
  </section>
  <section class="clearfix column">
    <fieldset>
      <legend>
        <i class="fa fa-laptop" aria-hidden="true"></i>
      What are your Interests <hr class="style2">
      </legend>
      <section class="clearfix column left">
        <label class="bottom span">
          <span>
            <input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design
          </span>
        </label>
        <label class="bottom">
          <span>
            <input name="webdevelopment" value="web_development" type="checkbox" class="checks" />Web Development
          </span>          
        </label>
        <label class="bottom">
          <span>
            <input name="computerscience" value="computer_science" type="checkbox"class="checks" />Computer Science
          </span>
        </label>
      </section>
      <section class="clearfix column left"> 
        <label  class="bottom">
          <span>
            <input name="graphicdesign" value="graphic_design" type="checkbox" class="checks"/>Graphic Design
          </span>
        </label>
        <label class="bottom">
          <span>
            <input name="userexperience" value="user_experience" type="checkbox" class="checks" />User Experience
          </span>
        </label>
        <label class="bottom">
          <span>
            <input class="checks" name="appdevelopment" value="app_development" type="checkbox" />App Development
          </span>
        </label>
      </section>
    </fieldset>
    <fieldset>
      <legend>
        <i class="fa fa-volume-control-phone" aria-hidden="true"></i>
      Continuation <hr class="style2 toosmall">
      </legend>

      <section class="clearfix column left"> 
        <legend class="smaller">You can contact me by:</legend>
        <br>
        <div class="squish">
          <label  class="bottom">
            <span>
              <input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone
            </span>
          </label>
          <label  class="bottom">
            <span>
              <input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email
            </span>
          </label>
          <label class="bottom">
            <span>
              <input class="checks"  name="contact_me" type="radio" value="text"/>Contact me by text
            </span>
          </label>
          <br>
        </div>
      </section>
      <section class="clearfix column left"  >
        <legend class="smaller" >I'm interested in:</legend>
        <br>
        <label class="bottom">
          <span>
            <input class="checks" name="interest" type="radio" value="text"/>Undergraduate</span>
        </label>
        <label class="bottom">
          <span>
            <input class="checks" name="interest" type="radio" value="text"/>Graduate</span>
        </label>
        <label class="bottom">
          <span>
            <input class="checks" name="interest" type="radio" value="text"/>Online</span>
        </label>
      </section>
    </fieldset>
  </section>
  <input class="button" name="submit_to_programmer" type="submit" value="Submit"/>
  <input type="hidden" value="Message from Car Website" name="subject">
  <input name="redirect" type="hidden" value="thanks.html">
</form>
<br>

<script src="https://use.fontawesome.com/8f5d316ef9.js"></script>
</div>

1 个答案:

答案 0 :(得分:4)

&#13;
&#13;
/*Mobile*/

.button{
	
	position:relative;
    bottom: 5%;
    width: 100%;
    display: block;
    width: 200px;
    height: 50px;
    left: 0;
    right: 0;
    margin: auto;
   

	

}

/*Rest of Mobile Code*/

figure.stayssame {
	width: 100%;}


figure video {width: 100%; height: 80%;}


p{
	padding: 2%;
	}
	
	.video-txt{position: absolute; top: 30%; z-index: 9; color: #FFF; width: 100%;  text-align: center; font-size: 40px; 
}

object {position: absolute; left: 0%; top: -5%; z-index: 10;  width: 15%; }





/*ALL CODE FROM DESKTOP*/



figure.adjustable {
		width: 29%;
	}

html {
	  position: relative;
	  min-height: 100%;
	}

body {
	
	
	
    margin: 0 0 100px; /* bottom = footer height */
		font-family: 'Inconsolata', monospace;
		
		
		/*font-family: 'Courier New', sans-serif;*/
		font-weight: 300;
		font-size: 20px;
		line-height: 1.4em;

		
}

.squish{
margin-right:125px;	
	
}


.text{
padding:5px;	
}



header {
	  position: fixed;
	  z-index: 1000;
    width: 100%;
    top: 0px;
etter-spacing:1px;
	line-height: 55px;
	padding:9px;

	
	word-spacing:5px;
	
	
	}
header, h1, h2{
font-family: 'Orbitron', sans-serif;
}

.space{
padding: 5px;

color:white;
}

nav{
	
float:left;	
width:100%;
}



nav ul li.active a {
	background-color: none;
	 color: white;
	 text-decoration:none;
	}
	 nav ul li a:hover {
	color:#00E3FF;
	
	
	}
	
	
	
	nav ul li a:visited {
	
	text-decoration:none;	
	}



/*nav ul li a {
		display:inline-block;
		
		padding: 1 px;
		
		color: #fff;
		letter-spacing: 1 px;
		text-decoration:none;
		text-transform: uppercase;
		margin: .55em;
		font-size: 5 px;
		float: right;
		
	}

nav ul li.active a {
	/*background-color: none;
	 color: white;
	 text-decoration:none;
	}
	 a:hover {
	/*background-color:none;
	 color:black;
	 background-color:#00E3FF;
	
	}
	
	
	
	nav ul li a:visited {
	color:black;
	text-decoration:none;	
	}
*/
form{
	
padding-left: 20%;

	
	
	

}

/* header tags */

h1 {
 text-align: center;
 color:#013397;
 font-size: 40px;
 
 padding-top:50px;
	}

h2{
	text-align: center;
	color:#00E3FF;
	font-size: 30px;
	margin: 5px;
	padding:20px;
	}

p{
	text-align: left;
	}




	
	.clearfix:after {

  content:" ";

  display:block;

  clear:both;
  

}

#box{
background-color:#94DBEC ;


}

hr.style2 {
	border-top: 3px double #00E3FF;
	width:300px
}
section{
	
	
width: 85%;
margin-left: auto;
margin-right:auto;

margin-top: 35px;



}


img.adjustable{
	width: 100%;
	max-width:100%;
	height:auto;
	
	
   /* max-width: 400px;
	max-height: 400px;*/
		margin: 1em  ;
		
	
	/*width: 90%;
	margin:5%;*/
	
	
}



#inner{
height: 100px;
padding:15px 0;	
	
}


#container{
height:100%;

	
}



.imgbox5{
	padding-right:30px;
	padding-left:0px;
}

.imgbox4{
	
padding-right:30px;
	padding-left:0px;
	
}

.imgbox3{
padding-right:30px;
	padding-left:0px;
	
}


.imgbox2{
padding-right:30px;
	
	
}

.imgbox{
	
padding-right:30px;
	padding-left:0px;
}

#firstpara{
	background-color:#5E5757;
	color: white;
	
}

#secpara{
	background-color:#5E5757;
	color: white;
	
}

#thirdpara{
	background-color:#5E5757;
	color: white;
	
}

#fourthpara{
	background-color:#5E5757;
	color: white;
	
}
#primary{
	background-color:#5E5757;
	color: white;
}

#enroll{
margin:0;
padding:0;	
}
/*section{
	text-align: center;
	width: 100%;
	
	}*/

footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	
	height: 100px;
	padding-bottom: 2%;
	background-color:#670809;
	font-family: 'Inconsolata', monospace;
		
	/* text */
	
	padding-left: 10px;
	padding-top: 15px;
	color: #ffffff;
	font-size: 15px;
	text-align:center;
	
	
}

a { color: white; }

a, a:active { color: white;

text-decoration:none;

 }






.side{
left-margin:10px;
right-margin:10px;	
}

	
	
	
	object{
	  position: absolute;
       top:350px;
	   left:100px;
        height: 100px;
        width:200px;
		z-index:2000;
	}
	
	#headline{
	text-align: center;
	position: absolute;
	
	top:10%;
	left:35%;
	color:#00E3FF;
	line-height:20px;
	font-family: 'Orbitron', sans-serif;
	word-spacing: 1px;
	font-size:12px;
	
	}
	#value{
	background-color:#5E5757;
	color: white;
	width:90%;
	margin-left: auto;
margin-right:auto;
margin-top:2%;
	

	

	}
	
	
	
#title{
color:white;
text-align:center;
padding-top:10px;

	
}
 img{
width: 100%;
   display: block;
  }
 
/*.img{
border-width:thick;
	border-style:solid;
border-color:white;		
}

.column-right{
	float: right;
	width: 30%;
	padding: 1%;
	
	}
.column-center{
	display: inline-block;
	width: 30%;
	padding: 1%;
	
	bottom: 18px;
	
	
	}
	
	.column-left{
	float: left;file:///Volumes/MMG/webfix/video/techpic1.jpg
	width: 30%;
	padding: 1%;
	
	

	}
	
	#left-box{
	
	background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
	
}
#middle-box{
	background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;

}

#right-box{
	background-color:#5E5757;
color: white;
padding: 15px;
border-radius:10px;
padding-bottom:135px;
}
.more {
  position: relative;
  display:inline-block;
  color:black;
  font-weight: bold;
  top: 20px;
  right: 31px;
  background-color:white;
  border-bottom-left-radius: 10px;
  padding: 6px;
  margin: 9px;
  width: 30%;
}
#button3, #button2{
color: black;
position:relative;
top: 36px;
right:36px;	
}

#button1{
color:black;
position:relative;
top: 155px;
right:36px;	
}

*/

.msum{
	 position: absolute;
    bottom: 5%;
    width: 100%;
    display: block;
    width: 200px;
    height: 50px;
    
    left: 0;
    right: 0;
    margin: 0 auto;  
	
}

span{
font-size: 14px;	
}

.smaller{
font-size: 16px;
	
}




/*NAV BAR*/

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html{font-size: 62.5%; font-family: 'Open Sans', sans-serif;}
body{font-size: 1.6rem; min-height: 100vh;}
h1{font-size: 3rem; margin-bottom: 1rem;}
h2{font-size: 1.6rem;}
header{position: relative;}
main{padding: 2rem;}

/***************** NAVIGATION ********************/
nav ul{
	display: flex; 
	flex-wrap: wrap; 

	margin: 0 auto;		
   background: #670809;
}
nav ul,
nav li{
	flex: 1;	
}
nav li:last-child{border-bottom: none;}
nav a{
	text-decoration: none;
	color: inherit;
	display: block;
	font-size: 1.8rem;
}
nav a:hover{
	background: /*#adacac*/#555;
	color: #fff;
}
nav li{
	position: relative;
	line-height: 50px;
	color: #fff;
	text-align: center;
}  
nav input,
nav label{
	display: none;
	width: 36px; 
	height: 36px; 
	background: #555; 
	color: #fff; 
	text-align: center; 
	line-height: 36px;
	font-size: 1.6rem;
	border-radius: 4px;
} 
nav label{position: absolute; top: 8px; right: 8px; transition: .4s;}
nav label:hover{cursor:pointer;}
nav label:before{
	font-family: FontAwesome;
	font-size: 24px;
	content: "\f0c9";
	text-align: center;
}

/*************** MEDIA QUERIES *******************/

	nav ul{
		transform: translateY(0);
		box-shadow: 0 0 5px rgba(0,0,0, .7);
      transition: all .5s;
	}
	nav li{
		flex: none; 
		width: 100%;
		border-bottom: solid 1px #777;
	} 
	nav input[type="checkbox"]:checked + ul{
		transform: translateY(-100%);
		width: 100%;
		background: #999;   
      transition: all .5s;
	}
	nav label{display: block;}  
	nav input[type="checkbox"]:checked + ul li:nth-child(1){
		background: #777; 
		color: #fff;
	}  
	
	#css-toggle-menu{
	float:right;
	margin: 10px;
	}
	
&#13;
<form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix ">
<section class="clearfix">
<fieldset><legend>
<i class="fa fa-user" aria-hidden="true"></i>Personal Information
<hr class="style2">
</legend>
<label><span></span> <input name="first_name" type="text" value="" placeholder="First Name" autofocus required/>
</label>
<label><span>
</span><input name="last_name" type="text" value="" placeholder="Last Name" autofocus required/>
</label>
<label><span> </span><input name="date_of_birth" type="date" value="" placeholder="Date of Birth" autofocus required/>
</label>

<label><span>
 </span><input type="number" name="quantity" min="1" max="6" autofocus placeholder="number of years until next degree"></label>

<label ><span></span> <input name="level_of_education" type="hidden" value="" placeholder="level of education" autofocus required/></label>
<select class="bottom" name="education_level">
<option value="High School">High School</option>
<option value="Undergraduate">Undergradute</option>
<option value="Graduate">Graduate</option>
</select>






</fieldset>




<fieldset><legend><i class="fa fa-envelope-o" aria-hidden="true"></i>
Contact Information  <hr class="style2"></legend>

<label><span>
</span><input class="ghost-input" name="email" value="" type="email" placeholder="youremail@email.com" autocomplete="off" /></label>

<label><span></span><input name="phonenumber" value="" type="tel" placeholder="763-858-9564" /></label>

<label><span></span><input name="website" value="" type="url" placeholder="https://yourwebsite.com"/></label>



</fieldset>




</section>




<section class="clearfix column"  >


<fieldset><legend><i class="fa fa-laptop" aria-hidden="true"></i>
What are your Interests <hr class="style2"></legend>


<section class="clearfix column left"  >
<label class="bottom span" ><span ><input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design</span>
</label>

<label  class="bottom"><span><input name="webdevelopment" value="web_development" type="checkbox" class="checks" />Web Development</span>
</label>

<label  class="bottom"><span><input name="computerscience" value="computer_science" type="checkbox"class="checks" />Computer Science</span></label>

</section>
<section class="clearfix column left"  >

<label  class="bottom"><span><input name="graphicdesign" value="graphic_design" type="checkbox" class="checks"/>Graphic Design</span>
</label>

<label  class="bottom"><span><input name="userexperience" value="user_experience" type="checkbox" class="checks" />User Experience</span></label>

<label  class="bottom"><span><input  class="checks" name="appdevelopment" value="app_development" type="checkbox" />App Development</span>
</label>
</section>

</fieldset>



<fieldset><legend><i class="fa fa-volume-control-phone" aria-hidden="true">

</i>

Continuation <hr class="style2 toosmall"></legend>

<section class="clearfix column left"  >

<legend class="smaller">You can contact me by:</legend>
<br>

<div class="squish">
<label  class="bottom"><span><input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone</span></label>





<label  class="bottom"><span><input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email</span></label>

<label  class="bottom"><span><input class="checks"  name="contact_me" type="radio" value="text"/>Contact me by text</span></label>
<br>
</div>
</section>


<section class="clearfix column left"  >
<legend class="smaller" >I'm interested in:</legend>
<br>

<label  class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Undergraduate</span></label>
<label  class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Graduate</span></label>
<label  class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Online</span></label>
</section>


</fieldset>



</section>




<input class="button" name="submit_to_programmer" type="submit" value="Submit"/>
<input type="hidden" value="Message from Car Website" name="subject">
<input name="redirect" type="hidden" value="thanks.html">
</form>

<br>




</div>
&#13;
&#13;
&#13;

margin:auto;添加到您的.button