我想在title
之前有一行hr
,在title之后有一行hr
。我使用Bootstrap 5
,我设法在title
之前和之后都有一行,但我使用堆栈,使用container
类使title
标记对齐,并使该行从屏幕的一侧到另一侧。
问题是我如何使用container
来对齐内容,使行变成全角。
.decorated{
overflow: hidden;
text-align: center;
}
.decorated > span{
position: relative;
display: inline-block;
}
.decorated > span:before, .decorated > span:after{
content: '';
position: absolute;
top: 50%;
border-bottom: 2px solid;
width: 591px; /* half of limiter*/
margin: 0 20px;
}
.decorated > span:before{
right: 100%;
}
.decorated > span:after{
left: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md">
<div class="col-md">
<div class="">
<div class="container">
<h1 class="decorated"><span>My Title</span></h1>
</div>
</div>
</div>
</div>
这是我应该得到的:
3条答案
按热度按时间pnwntuvh1#
你的代码看起来好像差不多了,只是因为某些原因你限制了两行的宽度,这段代码使它们每一行都是100vw,所以它们绝对肯定足够长。
它还删除了正文的边距和父文本的溢出(否则你不会让东西移到屏幕的边缘),并使用CSS calc将两行从实际文本的边缘替换20px(而不是你在它们上面设置的边距,因为这会在两端创建边距)。
cdmah0mi2#
您可以使用一个小技巧,将line作为一个充满父对象的
::before
或::after
,然后将span放在上面,并为span提供与父对象背景类似的背景色。只需使用
span
的左值,您就完成了。4nkexdtk3#
加上
.container {margin: 0;}
,这就是你想要的结果吗?