HTML怎么让hr在⽂字右边居中，将居中⽂本添加到类似hr的⾏
的中间
在不知道宽度和背景颜⾊的情况下解决此问题的⽅法如下：
结构体
Kringle
的CSS
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: red;
}
.strike > span:before {
right: 100%;
margin-right: 15px;
}
.strike > span:after {
left: 100%;
margin-left: 15px;
}
⽰例：http：//jsfiddle/z8Hnz/
双线
要创建双线，请使⽤以下选项之⼀：
1)线间距固定
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
border-top: 4px double red;
⽰例：http：//jsfiddle/z8Hnz/103/
2)⾏之间的⾃定义空间
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 5px; /* space between lines */
margin-top: -2px; /* adjust vertical align */
border-top: 1px solid red;
border-bottom: 1px solid red;
html怎么让所有内容居中
}
⽰例：http：//jsfiddle/z8Hnz/105/
SASS(SCSS)版本
基于此解决⽅案，我添加了“具有颜⾊属性”的SCSS，如果它可以帮助某⼈... //mixins.scss
@mixin bg-strike($color) {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
> span {
position: relative;
display: inline-block;
&:before,
&:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: $color;
}
&:before {
right: 100%;
margin-right: 15px;
}
&:after {
left: 100%;
margin-left: 15px;
}
}
}
使⽤⽰例：
/
/content.scss
h2 {
@include bg-strike($col1); color: $col1;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。