我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
编辑(09/2020)
显示:flex方法似乎是当今最可靠、最容易设置的方法。
写于3月17 '15 17:06:
对于后来(现在)的浏览器,display:flex和伪元素使得无需额外标记即可轻松绘制。
如果你需要花哨或难看的妆容,边框风格,盒影甚至背景也有助于化妆。 h1 {margin-top: 50 px; 显示:flex; 背景:线性渐变(向左、灰色、浅灰色,白色,黄色,绿色);; } H1:前,H1:后{ 颜色:白色; 内容:”; flex: 1; 边界底部:槽2 px; 保证金:汽车0.25 em; /* ou 0 1px si border-style:ridge */ } <h1>侧线通过flex</h1>
资源(2020年9月新增):
https://css-tricks.com/snippets/css/a-guide-to-flexbox/(参见这里使用的flex/flex-grow) https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/ (margin:auto 0.25em;此处使用)
其他回答
好吧,这个更复杂,但它适用于所有浏览器,除了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/
如果有人想知道如何设置标题,使其显示在左侧的固定距离(而不是如上所示的居中),我通过修改@Puigcerber的代码来解决这个问题。
h1 {
white-space: nowrap;
overflow: hidden;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
}
h1:before {
right: 0.3em;
width: 50px;
}
h1:after {
left: 0.3em;
width: 100%;
}
这里是JSFiddle。
横线和竖线,中间有字
.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得到了回答
CSS网格是救星
类似于上面的flex答案,这也可以使用CSS网格来完成。这为您提供了更大的范围来偏移标题,以及一种更简单的方式来扩大行(使用网格-模板-列)和内容(使用网格-间隙)之间的间隙。
与flex方法相比,该方法的优点是易于偏移行,并且只需要在列之间添加一次间隙(而不是两次,对于每个:before和:after伪元素)。在我看来,它在语法上也更清晰和明显。
h1 { 显示:网格; Grid-template-columns: 1fr auto 1fr; 对齐项目:中心; grid-gap: 1快速眼动; } h1:之前, h1:{后 内容:“”; 显示:块; border-top: 2px solid currentColor; } h1。抵消{ Grid-template-columns: 1fr auto 3fr; } h1。biggap { grid-gap: 4快速眼动; } <h1>这是一个标题</h1> <h1 class="offset"> offset title</h1> <h1 class="biggap">Gappy title</h1> <标题> < span >多行标题< br / > < / span > < / h1 >
我使用一个表格布局来动态填充边和0高度,绝对位置div动态垂直定位:
没有硬编码的维度 没有图像 没有它 方面的背景 控制条外观
https://jsfiddle.net/eq5gz5xL/18/
我发现,稍微低于真中心的文字效果最好;这可以在55%的位置进行调整(身高越高,界限越低)。线条的外观可以改变边界底部的位置。
HTML:
<div class="title">
<div class="title-row">
<div class="bar-container">
<div class="bar"></div>
</div>
<div class="text">
Title
</div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
CSS:
.title{
display: table;
width: 100%
background: linear-gradient(to right, white, lightgray);
}
.title-row{
display: table-row;
}
.bar-container {
display: table-cell;
position: relative;
width: 50%;
}
.bar {
position: absolute;
width: 100%;
top: 55%;
border-bottom: 1px solid black;
}
.text {
display: table-cell;
padding-left: 5px;
padding-right: 5px;
font-size: 36px;
}