在div中内联文本

时间:2018-03-19 23:45:38

标签: html css css3

我正在努力让我的h1在我的框中内嵌,如this。目前我的H1文本堆叠在彼此之上and looks like this。我希望这是内联而不是堆叠在一个上面,我已经尝试将display: inline-block;display: inline;添加到我的H1中。我需要在H1或box div中添加或删除什么才能实现我的H1内联!

HTML

<body>
  <div class="box">
    <h1>Centered Text</h1>
  </div>
</body>

CSS

*{
  margin: 0;
  padding: 0;
}
body{
  background-color: teal;
  font-family: sans-serif;
}
.box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  width: 500px;
  height: 100px;
  background-color: red;
}
h1{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  font-size: 50px;
  font-weight: lighter;
  color: white;
}

Jfiddle

3 个答案:

答案 0 :(得分:4)

您的h1position: absolute,但没有width设置。只需向其添加width: 100%;即可使其成为容器的宽度,以便文本在一行中适合它。

https://jsfiddle.net/80r16xgs/2/

答案 1 :(得分:0)

只需将white-space: nowrap;添加到h1,即可this fiddle

答案 2 :(得分:-1)

尝试在h1中使用position: relative

Viacheslav Vedenin