Cakers Cakers - 18 days ago 10
CSS Question

Submit Button center issue

I need help trying to center my submit button. Recently I just had a question about centering something in my footer and am now struggling with centering my submit button.. I'm new to HTML and CSS so I'm trying very hard to understand everything which is why this site helps so much because every one on here always has really good ideas!

So like I said the issue I am having is trying to center my submit button for responsive design.

If any of you have any thoughts on this I would really appreciate it! Thank You!



/*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>




GvM GvM
Answer

/*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;
	}
	
<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>

add margin:auto; to your .button