0
Ich bin sehr neu in der Web-Entwicklung. Dies ist tatsächlich mein erstes persönliches Projekt und ich habe Probleme beim Ausrichten der Eingabefelder. Ich entwarf das Layout in XD und versuchte, das Design zu programmieren. Denken Sie daran, ich arbeite am mobilen Layout, so dass es nur etwa 400 Pixel breit ist. Ich denke, ich kann mich später bei Medienanfragen um die Reaktionsfähigkeit kümmern. Wie auch immer, ich habe versucht, die Eingabefelder zu targetieren und text-align: center; aber es funktioniert nicht. Bitte helfen Sie! DieseWie kann ich die Eingabefelder in der Mitte erscheinen lassen? Textausrichtung: Mitte; funktioniert nicht
ist, was meine Seite zur Zeit wie folgt aussieht:
![enter image description here]](https://i.stack.imgur.com/D2Dbb.png)
Dies ist, was ich es muss wie folgt aussehen:
![This is what I need them to look like]](https://i.stack.imgur.com/Vmt9F.png)
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<title>40 Hour Workweek Calculator</title>
</head>
<header>
<h3>40-Hour Workweek Calculator</h3>
</header>
<body>
<h4 class="sections">Total hours needed to work this week:</h4>
<input type="text" class="userInput" placeholder="ex: 40" />
<h4 class="sections">On Friday morning, how many hours<br />(in whole numbers) do you currently have?</h4>
<input type="text" class="userInput" placeholder="ex: 33"/>
<h4 class="sections">Enter remaining decimals:</h4>
<input type="text" class="userInput" placeholder="ex: .57"/>
<h4 class="sections">Converted to time format:</h4>
<div class="defaultCalc"></div>
<h4 class="sections">Remaining hours to work:</h4>
<div class="defaultCalc"></div>
<h4 class="sections">Enter time you clocked in on Friday:</h4>
<input type="text" class="userInput" placeholder="ex: 7:22"/><br />
<div class="buttons">
<button class="amButton">AM</button>
<button class="pmButton">PM</button>
</div>
<h4 class="sections">Enter today's lunch break in minutes:</h4>
<input type="text" class="userInput" placeholder="ex: 30"/>
<div class="sections">
<button class="calcButton">Calculate my hours</button>
<h4 class="sections">Time to clock out on Friday:</h4>
<div class="defaultCalc clockOutTime"></div>
<div class="sections">
<div class="clockOutAMButton">AM</div>
<div class="clockOutPMButton">PM</div>
</div>
</body>
CSS:
/*Base style layouts*/
header, body {
font-family: 'Lato', sans-serif;
}
body {
background: #edf0f1;
font-family: 'Roboto', sans-serif;
}
header {
width: 100%;
height: 70px;
border-bottom-left-radius: 46px;
border-bottom-right-radius: 46px;
background-color: #15D1BC;
box-shadow: 0px 2px 4px rgba(44,62,80,0.15);
color: #fff;
text-align: center;
}
header h3 {
margin: 0;
padding-top: 20px;
font-size: 1.25em;
font-weight: 400;
}
h4 {
font-weight: 100;
color: #95989A;
text-align: center;
}
.sections {
margin: 30px 0;
}
/*Gray areas that display javascript calculations*/
.defaultCalc {
border: 1px none;
width: 133px;
height: 29px;
background-color: #DBDBDB;
border-radius: 12px;
text-align: center;
}
/*Sections that require the user to input a number*/
.userInput::placeholder {
font-weight: 100;
font-style: italic;
color: rgba(149, 152, 154, 0.4);
text-align: center;
}
.userInput {
border: 1px solid #D3D8DB;
width: 133px;
height: 29px;
border-radius: 12px;
}
.sections {
margin: 30px 0;
}
/*Buttons*/
.amButton,
.pmButton {
border: 1px;
width: 45px;
height: 30px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-weight: 100;
}
.buttons {
margin: 25px 0;
}
.calcButton {
border: 1px;
width: 217px;
height: 36px;
background-color: #15D1BC;
color: #FFF;
border-radius: 18px;
font-weight: 100;
font-size: 1.1em;
}
.clockOutTime {
border: 1px none;
width: 133px;
height: 29px;
background-color: #60B6FF;
color: #fff;
border-radius: 12px;
text-align: center;
}
.clockOutAMButton,
.clockOutPMButton {
border: 1px;
width: 45px;
height: 30px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-weight: 300;
text-align: center;
display: inline-block;
line-height: 30px;
}
button:focus {outline:0;}
input:focus {
border-color: #15D1BC;
outline: none;
}
.pmButton:focus {
background-color: #15D1BC;
color: #FFF;
}
.amButton:focus {
background-color: #15D1BC;
color: #FFF;
}
.calcButton:active {
font-size: 1.075em;
}