我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
我试着做一个水平规则,中间有一些文本。 例如:
----------------------------------- 我的标题 -----------------------------
在CSS中有办法做到这一点吗?显然没有“-”号。
当前回答
这可能有点超出了问题的范围,但我相信这确实有助于其他有类似问题的人。
如果您需要多个单元格,并且不想显式地指定背景颜色,则必须对行的每个部分使用标记。
这允许你使用一个完整的伸缩线来定位元素,例如扩展器
.title-hr { 宽度:100%; vertical-align:中间; 对齐项目:中心; text-align:开始; 显示:flex; } .title-hr >跨度{ 填料:0 0.4em; } .title-hr >。人力资源{ Border-bottom: 1px实心#777; 行高:0.1 em; 保证金:0.34em 0 0.35em; Flex: 1台自动; } .title-hr > .hr。修复{ Flex: 0 1自动; } < div class = " title-hr”> < span > + < / span > <span class="hr fix"></span> 标题< span > < / span > < span class = "人力资源部" > < / span > < / div >
其他回答
我一直在寻找这个简单的装饰的一些解决方案,我发现了相当多的,一些奇怪的,一些甚至用JS来计算字体的高度和bla,bla,bla,然后我读了这篇文章,读了一个评论从thirtydot谈到fieldset和传说,我认为这就是它。
我重写了这2个元素样式,我猜你可以复制它们的W3C标准,并将其包含在你的.middle-line-text类(或任何你想叫它的)中,但这是我所做的:
<fieldset class="featured-header">
<legend>Your text goes here</legend>
</fieldset>
<style>
.featured-header{
border-bottom: none;
border-left: none;
border-right: none;
text-align: center;
}
.featured-header legend{
-webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
-webkit-padding-end: 8px;
background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
font-weight: normal; /* I preffer the text to be regular instead of bold */
color: YOU_CHOOSE;
}
</style>
这是小提琴:http://jsfiddle.net/legnaleama/3t7wjpa2/
我玩了边界样式,它也可以在Android;)(在kitkat 4.XX上测试)
编辑:
遵循Bekerov Artur的想法,这也是一个不错的选择,我已经改变了。png base64图像创建一个。svg的笔画,这样你就可以在任何分辨率渲染,也可以改变元素的颜色,而不需要任何其他软件的参与:)
/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}
IE8及更新版本的解决方案…
值得注意的问题:
使用背景颜色来掩盖边框可能不是最好的解决方案。如果你有一个复杂的(或未知的)背景颜色(或图像),掩蔽最终将失败。此外,如果你调整文本大小,你会注意到白色背景色(或任何你设置的颜色)会开始覆盖上面(或下面)的文本。
您也不希望“猜测”各个部分的宽度,因为这会使样式非常不灵活,几乎不可能在内容宽度不断变化的响应式站点上实现。
解决方案:
(View JSFiddle)
使用display属性,而不是用背景色“掩蔽”边框。
HTML
<div class="group">
<div class="item line"></div>
<div class="item text">This is a test</div>
<div class="item line"></div>
</div>
CSS
.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }
通过在.group元素上放置font-size属性来调整文本大小。
限制:
没有多行文本。只能单行。 HTML标记不那么优雅 line元素上的Top属性需要是行高的一半。所以,如果行高是1.5em,那么顶部应该是- 0.75 em。这是一个限制,因为它不是自动的,如果您在具有不同行高的元素上应用这些样式,那么您可能需要重新应用您的行高样式。
对我来说,这些限制超过了我在回答大多数实现时开头提到的“问题”。
好吧,这个更复杂,但它适用于所有浏览器,除了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的回答
我使用一个表格布局来动态填充边和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;
}