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

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

为text-align元素设置center到form;将"Q:"和"A:"文本分别设置为html元素的span;从float: left移除css;将input position设为relative;使用form input函数将left 50%设置为input减去width 2除以calc()。

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;