Question

我是CSS的新手。我想在标题文本的两边添加水平线，但不希望文本位于中心。我当前使用的CSS在中心对齐文本。

-------------------------------------------------某些文本-----------------------------------------------

我希望它像

---------某些文本------------------------------------ ---------------------------------

如何设置这样的文本位置。

<div class="decoratedLine vlabelBold"><span>Some Text</span></div>

CSS：

<style>
.decoratedLine{
     overflow: hidden;
     text-align: center;
 }
.decoratedLine > span{
    position: relative;
    display: inline-block;
}
.decoratedLine > span:before, .decoratedLine > span:after{
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 1px solid;
    width: 591px; /* half of limiter*/
    margin: 0 20px;
}
.decoratedLine > span:before{
    right: 100%;
}
.decoratedLine > span:after{
    left: 100%;
}
</style>

Answer 1

您可以通过更改下方选择器的样式来实现-

.decoratedLine {
    overflow: hidden;
    padding-left: 40px;
}

.decoratedLine {
    overflow: hidden;
    padding-left: 40px;
}

.decoratedLine>span {
    position: relative;
    display: inline-block;
}

.decoratedLine>span:before,
.decoratedLine>span:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-bottom: 1px solid;
    width: 591px;
    /* half of limiter*/
    margin: 0 20px;
}

.decoratedLine>span:before {
    right: 100%;
}

.decoratedLine>span:after {
    left: 100%;
}

<div class="decoratedLine vlabelBold"><span>Some Text</span></div>

在文本的左侧和右侧添加水平线，但文本不应位于中间

1 个答案: