我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
以防有人想这样做,依我看,使用CSS的最佳解决方案是使用flexbox。
这里有一个例子:
.kw-dvp-HorizonalButton { color: #0078d7; display:flex; flex-wrap:nowrap; align-items:center; } .kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after { background-color: #0078d7; content: ""; display: inline-block; float:left; height:1px; } .kw-dvp-HorizonalButton:before { order:1; flex-grow:1; margin-right:8px; } .kw-dvp-HorizonalButton:after { order: 3; flex-grow: 1; margin-left: 8px; } .kw-dvp-HorizonalButton * { order: 2; } <div class="kw-dvp-HorizonalButton"> <span>hello</span> </div>
这应该总是会产生一个完美的居中对齐的内容,左边和右边有一条线,线和内容之间有一个容易控制的边缘。
它在顶部控件之前和之后创建一个线元素,并在flex容器中将它们设置为顺序1,3,同时将内容设置为顺序2(进入中间)。 将前/后的值增加为1,可以使它们平等地占用最多的空白空间,同时保持内容的中心。
希望这能有所帮助!
其他回答
如果你正在使用React与样式组件。我发现分离元素更简单。不是“神奇的解决方案”,但它确实有效。
import React from 'react';
import styled from "@emotion/styled";
const Container = styled.div`
padding-top: 210px;
padding-left: 50px;
display: inline-flex;
`
const Title1 = styled.div`
position: absolute;
font-size: 25px;
left:40px;
color: white;
margin-top: -17px;
padding-left: 40px;
`
const Title2 = styled.div`
position: absolute;
font-size: 25px;
left:1090px;
color: white;
margin-top: -17px;
padding-left: 40px;
`
const Line1 = styled.div`
width: 20px;
border: solid darkgray 1px;
margin-right: 90px;
`
const Line2 = styled.div`
width: 810px;
border: solid darkgray 1px;
margin-right: 126px;
`
const Line3 = styled.div`
width: 178px;
border: solid darkgray 1px;
`
const Titulos = () => {
return (
<Container>
<Line1/>
<Title1>
FEATURED
</Title1>
<Line2/>
<Line1/>
<Title2>
EXCLUSIVE
</Title2>
<Line3/>
</Container>
);
};
export default Titulos;
结果:
以防有人想这样做,依我看,使用CSS的最佳解决方案是使用flexbox。
这里有一个例子:
.kw-dvp-HorizonalButton { color: #0078d7; display:flex; flex-wrap:nowrap; align-items:center; } .kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after { background-color: #0078d7; content: ""; display: inline-block; float:left; height:1px; } .kw-dvp-HorizonalButton:before { order:1; flex-grow:1; margin-right:8px; } .kw-dvp-HorizonalButton:after { order: 3; flex-grow: 1; margin-left: 8px; } .kw-dvp-HorizonalButton * { order: 2; } <div class="kw-dvp-HorizonalButton"> <span>hello</span> </div>
这应该总是会产生一个完美的居中对齐的内容,左边和右边有一条线,线和内容之间有一个容易控制的边缘。
它在顶部控件之前和之后创建一个线元素,并在flex容器中将它们设置为顺序1,3,同时将内容设置为顺序2(进入中间)。 将前/后的值增加为1,可以使它们平等地占用最多的空白空间,同时保持内容的中心。
希望这能有所帮助!
对我来说,这个解决方案非常有效……
HTML
<h2 class="strikethough"><span>Testing Text</span></h2> .
CSS
.strikethough {
width:100%;
text-align:left;
border-bottom: 1px solid #bcbcbc;
overflow: inherit;
margin:0px 0 30px;
font-size: 16px;
color:#757575;
}
.strikethough span {
background:#fff;
padding:0 20px 0px 0px;
position: relative;
top: 10px;
}
这里有一个解决方案,只需要2个属性,很容易更新使用CSS变量:
h2 { --s: 3px; /* the thickness */ --c: red; /* the color */ --w: 100px; /* the width */ --g: 10px; /* the gap */ border: 1px solid; border-image: linear-gradient( #0000 calc(50% - var(--s)/2), var(--c) 0 calc(50% + var(--s)/2), #0000 0) 0 1/0 var(--w)/0 calc(var(--w) + var(--g)); } h2 { font-size: 2rem; margin: 20px auto; width: fit-content; } body { font-family: system-ui, sans-serif; } <h2>I am a Title</h2> <h2 style="--g:50px;--c:purple">Adding some gap </h2> <h2 style="--w:100vw;--c:blue;--s:7px">Title</h2> <h2 style="--c:green;--s:5px;--w:50px;--g:20px">Another Title</h2>
这为您提供了固定的线条长度,但效果很好。 行长可以通过添加或取'\00a0' (unicode空格)来控制。
H1:前,H1:后{ 内容:“\ 00 a0 \ 00 a0 \ 00 a0 \ 00 a0 '; 文字修饰:线穿过; 保证金:自动0.5em; } <标题>边线h1 > < /