我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
这里有一个解决方案,只需要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>
其他回答
如果你正在使用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;
结果:
在尝试了不同的解决方案后,我有一个有效的不同的文本宽度,任何可能的背景,没有添加额外的标记。
h1 { 溢出:隐藏; text-align:中心; } h1:之前, h1:{后 background - color: # 000; 内容:“”; 显示:inline-block; 身高:1 px; 位置:相对; vertical-align:中间; 宽度:50%; } h1:{之前 右:0.5 em; margin-left: -50%; } h1:{后 左:0.5 em; margin-right: -50%; } <标题>标题< / h1 > <h1>这是一个较长的标题</h1>
我在IE8、IE9、Firefox和Chrome浏览器上进行了测试。你可以在这里查看http://jsfiddle.net/Puigcerber/vLwDf/1/
好吧,这个更复杂,但它适用于所有浏览器,除了IE<8
<div><span>text TEXT</span></div>
div {
text-align: center;
position: relative;
}
span {
display: inline-block;
}
span:before,
span:after {
border-top: 1px solid black;
display: block;
height: 1px;
content: " ";
width: 40%;
position: absolute;
left: 0;
top: 1.2em;
}
span:after {
right: 0;
left: auto;
}
:before和:after元素的位置是绝对的,因此我们可以将一个元素拉到左边,一个元素拉到右边。此外,宽度(在本例中为40%)非常依赖于内部文本的宽度。我得想个解决办法。至少在顶部:1.2em可以确保即使字体大小不同,线条也或多或少地保持在文本的中心。
它似乎工作得很好:http://jsfiddle.net/tUGrf/3/
没有伪元素,没有附加元素。只有一个div:
为了便于控制,我使用了一些CSS变量。
div { --border-height: 2px; --border-color: #000; background: linear-gradient(var(--border-color),var(--border-color)) 0% 50%/ calc(50% - (var(--space) / 2)) var(--border-height), linear-gradient(var(--border-color),var(--border-color)) 100% 50%/ calc(50% - (var(--space) / 2)) var(--border-height); background-repeat:no-repeat; text-align:center; } <div style="--space: 100px">Title</div> <div style="--space: 50px;--border-color: red;--border-height:1px;">Title</div> <div style="--space: 150px;--border-color: green;">Longer Text</div>
但是上面的方法不是动态的。你必须根据文本长度改变——space变量。
使用Flexbox的简单方法
# title-wrapper { 显示:flex; 对齐项目:中心; } .title { flex-wrap:包装; Margin: 0 10px 0 10px; text-align:中心; } .line { flex: 1; 身高:1 px; 背景颜色:黑色; } <节id =“title-wrapper”> < div class = '行' > < / div > <div class='title'>some text</div> < div class = '行' > < / div > < / >节