css 如何将标签放在网页中间的div中？[副本]

ezykj2lf 于 2023-08-09 发布在其他

关注(0)|答案(2)|浏览(126)

此问题在此处已有答案：

How can I horizontally center an element?（131答案）
3天前关闭。
我花了相当长的时间试图为我的简单JavaScript计数器创建一个计算器式的设计，但我不能移动蓝色屏幕，由一个显示值的标签表示，在计数器的粉红色主体中，由一个div表示。我想把屏幕放在柜台最上面的中间。而不是I'm getting this:。
以防你因为某种原因看不到我的代码;我的counter_body和counter_label的CSS代码如下：

#counter_label{
  text-align: center;
  margin: auto;
  height: 200px;
  width: 300px;
  font-family: "Comic Sans MS";
  background-color: aqua;
  padding-left: 15%;
  padding-right: 15%;
}
#counter_body{
  color: red;
  border: 1px solid rgb(255, 0, 136);
  border-radius: 5%;
  padding-top: 20%;
  padding-left: 15%;
  padding-right: 15%;
  background: rgb(183, 154, 159);
  height: 200px;
  width: 300px;
  margin: auto;
}

个字符
我已经尝试了我能想到的一切，作为一个绝对的新手编码器，但我不能把蓝色标签到位。如有帮助，不胜感激。

css

来源：https://stackoverflow.com/questions/76838841/how-do-you-center-a-label-inside-a-div-at-the-middle-of-a-webpage

2条答案

按热度按时间

ryevplcw1#

溶液

需要将display: block;添加到<label>：

#counter_label {
  display: block;
  text-align: center;
  margin: 0 auto;
  height: 200px;
  width: 300px;
  font-family: "Comic Sans MS";
  background-color: aqua;
  padding-left: 15%;
  padding-right: 15%;
}
#counter_body{
  color: red;
  border: 1px solid rgb(255, 0, 136);
  border-radius: 5%;
  padding-top: 20%;
  padding-left: 15%;
  padding-right: 15%;
  background: rgb(183, 154, 159);
  height: 200px;
  width: 300px;
  margin: auto;
}

个字符

更多信息

List of HTML tags- MDN文档
<label>- MDN文档
**在任何情况下，我认为这是错误的：如果<label>的功能与<input>字段的名称不同，最好使用适当的标记。**在大多数情况下，我们使用<div>，但如果您想提供标题，则使用<h1>等。标签也是有帮助的。

展开查看全部

赞(0）回复(0）举报 2023-08-09

lymgl2op2#

在这里使用标签是不正确的html元素。标签应与Input标记see more details here.配对
如果使用不同的元素，例如<h1-6>，它将正确居中。

赞(0）回复(0）举报 2023-08-09