html - 如何在我的网站上设置我的盒子和标签的样式？

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；将 input position 设置为 relative；将 form input left 设置为 50% 减去 input width 除以 2 使用 calc() 函数。

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>