【问题标题】: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>

任何帮助将不胜感激。

【问题讨论】:

标签: 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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-11-28
      • 1970-01-01
      • 1970-01-01
      • 2011-08-23
      • 1970-01-01
      • 2019-08-12
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多