div内的文本不会居中答案

【问题标题】：Text inside div wont centerdiv内的文本不会居中
【发布时间】：2018-05-19 01:21:42
【问题描述】：

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

相关代码：

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

任何帮助将不胜感激。

【问题讨论】：

使用css属性text-align: center
Center text in div?的可能重复

标签： html css

【解决方案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>

【讨论】：

“text-align: center you must use”是我心中的意思。
@UncaughtTypeError 搬到我拥有的城市，我必须融入。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

希望这会有所帮助。

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

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

【讨论】：