0
Ich brauche Hilfe beim Zentrieren meines Submit-Buttons. Vor kurzem hatte ich nur eine Frage über das Zentrieren von etwas in meiner Fußzeile und kämpfe jetzt mit dem Zentrieren meiner Submit-Taste. Ich bin neu in HTML und CSS, also versuche ich sehr hart alles zu verstehen, weshalb diese Seite so sehr hilft Jeder hier hat immer gute Ideen!Submit Button center Ausgabe
So wie ich sagte, das Problem, das ich habe, versucht zu zentrieren mein Submit-Button für responsive Design.
Wenn jemand von euch darüber irgendwelche Gedanken hat, würde ich es sehr schätzen! Danke!
/*Mobile*/
.button{ \t
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; \t
}
.text{
padding:5px; \t
}
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; \t
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; \t
}
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; \t
}
#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; \t
}
/*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; \t
}
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; \t
}
.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; \t \t
background: #670809;
}
nav ul,
nav li{
flex: 1; \t
}
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="[email protected]" 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>
habe ich versucht, dass und wenn das passiert, es bleibt immer noch an der gleichen Stelle @GvM – Cakers
Hier ist ein Jsfiddle damit Sie das Problem besser sehen können: https://jsfiddle.net/xspc9qhn/@GvM – Cakers
es ist in der Mitte der Form richtig? – GvM