如何在我的网站上设计我的盒子和标签的样式

Question

我正在尝试格式化它，使问题标签"q"居中并位于问题框的上方，在问题框的下方也是居中的"A"标签和框，按钮位于问题框下方。感谢您的帮助。

h1 {
text-align: center;
}
label,
input {
	width: 120px;
	display: block;
	float: left;
	margin-bottom: 10px;
}
label {
	width: 240px;
	text-align: right;
	padding-right: 10px;
	margin-top: 2px;
}
br {
	clear: left;
}
.button {
	width: 120px;
	background: rgba(144, 255, 246, 0.42);
	color: #0000a0;
	padding: 5px;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	margin-left: 250px;
}
body {
background-image: url(assets/bg1.png);
}

<form name="ThisForm">
<h1>Learning to multiply</h1>

Q:
<input type="text" name="question" id="question" disabled="disabled" />A:
<input type="text" name="Ans" id="Ans" maxlength="3" size="3" />
<input type="button" value="Check Answer" onclick="buttonPressed()"/>
<br />
</form>

Answer 1

将form元素的text-align设置为center；将"Q:"和"A:"文本分别设置为span元素中的html；从css中移除float: left；将CCD_ 10position设置为CCD_；使用CCD_ 19函数将form inputleft设置为50%减去inputwidth除以2。

h1 {
text-align: center;
}
label,
input {
width: 120px;
position: relative;
display: block;
margin-bottom: 10px;
}
label {
width: 240px;
text-align: right;
padding-right: 10px;
margin-top: 2px;
}
.button {
width: 120px;
background: rgba(144, 255, 246, 0.42);
color: #0000a0;
padding: 5px;
border: none;
border-radius: 2px;
cursor: pointer;
margin-left: 250px;
}
form {
text-align:center;
}
form input {
left: calc(50% - 120px / 2);
}

<form name="ThisForm">
<h1>Learning to multiply</h1>
<span>Q:</span>
<input type="text" name="question" id="question" disabled="disabled" />
<span>A:</span>
<input type="text" name="Ans" id="Ans" maxlength="3" size="3" /><br>
<input type="button" value="Check Answer" onclick="buttonPressed()" />
</form>