我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
如果你正在使用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;
结果:
其他回答
好吧,这个更复杂,但它适用于所有浏览器,除了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 class="flex items-center">
<div class="flex-grow bg bg-gray-300 h-0.5"></div>
<div class="flex-grow-0 mx-5 text dark:text-white">or</div>
<div class="flex-grow bg bg-gray-300 h-0.5"></div>
</div>
献给所有喜欢顺风的人。 灵感来自于WellSpring的回答
使用Bootstrap 4预定义类
<div class="row align-items-center">
<div class="col dropdown-divider"></div>
<div class="col-auto">OR</div>
<div class="col dropdown-divider"></div>
</div>
我已经尝试了大多数建议的方法,但结束了一些问题,如全宽度,或不适合动态内容。最后我修改了一个代码,并完美地工作。这个示例代码将在之前和之后绘制这些线条,并且在内容更改方面非常灵活。中心对齐。
HTML
<div style="text-align:center">
<h1>
<span >S</span>
</h1>
</div>
<div style="text-align:center">
<h1>
<span >Long text</span>
</h1>
</div>
CSS
h1 {
display: inline-block;
position: relative;
text-align: center;
}
h1 span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
h1:before {
background: #ddd;
content: "";
height: 1px;
position: absolute;
top: 50%;
width: calc(100% + 50px);//Support in modern browsers
left: -25px;
}
h1:before {
left: ;
}
结果: https://jsfiddle.net/fasilkk/vowqfnb9/
横线和竖线,中间有字
.box{ background-image: url("https://i.stack.imgur.com/N39wV.jpg"); width: 350px; padding: 10px; } /*begin first box*/ .first{ width: 300px; height: 100px; margin: 10px; border-width: 0 2px 0 2px; border-color: red; border-style: solid; position: relative; } .first span { position: absolute; display: flex; right: 0; left: 0; align-items: center; } .first .foo{ top: -8px; } .first .bar{ bottom: -8.5px; } .first span:before{ margin-right: 15px; } .first span:after { margin-left: 15px; } .first span:before , .first span:after { content: ' '; height: 2px; background: red; display: block; width: 50%; } /*begin second box*/ .second{ width: 300px; height: 100px; margin: 10px; border-width: 2px 0 2px 0; border-color: red; border-style: solid; position: relative; } .second span { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; } .second .foo{ left: -15px; } .second .bar{ right: -15.5px; } .second span:before{ margin-bottom: 15px; } .second span:after { margin-top: 15px; } .second span:before , .second span:after { content: ' '; width: 2px; background: red; display: block; height: 50%; } <div class="box"> <div class="first"> <span class="foo">FOO</span> <span class="bar">BAR</span> </div> <br> <div class="second"> <span class="foo">FOO</span> <span class="bar">BAR</span> </div> </div>
这个问题也在https://stackoverflow.com/a/57279326/6569224得到了回答