div内的文字不会中心

Question

问题陈述：未发生中心对齐

相关代码：

#tekst {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #EFEFEF;
  width: 100%;
  height: 30%;
}

#innhold {
  width: 100%;
  height: 30%;
  top: 18%;
  left: 0%;
  background-color: #7e7e7e;
  position: absolute;
  border-radius: 5px;
  z-index: 2;
}

<div id="innhold">
  <div id="tekst"> text </div>
</div>

任何帮助将不胜感激。

Answer 1

您可以使用text-align:center;将文字居中。

#tekst {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #EFEFEF;
  width: 100%;
  height: 30%;
  text-align: center;
}

#innhold {
  width: 100%;
  height: 30%;
  top: 18%;
  left: 0%;
  background-color: #7e7e7e;
  position: absolute;
  border-radius: 5px;
  z-index: 2;
}

<div id="innhold">
  <div id="tekst"> text </div>
</div>

Answer 2

要完全居中您的文字，您可以使用flexbox：

＆＃13;

＆＃13;

#tekst {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #EFEFEF;
  height: 30%;
}

#innhold {
  width: 100%;
  height: 30%;
  top: 18%;
  left: 0%;
  background-color: #7e7e7e;
  position: absolute;
  border-radius: 5px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<div id="innhold">
  <div id="tekst"> text </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要添加CSS属性text-align:center;。

希望这有帮助。

＆＃13;

＆＃13;

#tekst {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  text-align:center;
  color: #EFEFEF;
  width: 100%;
  height: 30%;
}

#innhold {
  width: 100%;
  height: 30%;
  top: 18%;
  left: 0%;
  background-color: #7e7e7e;
  position: absolute;
  border-radius: 5px;
  z-index: 2;
}

＆＃13;

<div id="innhold">
  <div id="tekst"> text </div>
</div>

＆＃13;

＆＃13;

＆＃13;