我正在努力让我的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;
}
答案 0 :(得分:4)
您的h1
有position: absolute
,但没有width
设置。只需向其添加width: 100%;
即可使其成为容器的宽度,以便文本在一行中适合它。
答案 1 :(得分:0)
只需将white-space: nowrap;
添加到h1
,即可this fiddle。
答案 2 :(得分:-1)
尝试在h1中使用position: relative
。