it-swarm.asia

CSS技术用于水平线,中间有单词

我正在尝试制作一个水平规则,中间有一些文字。例如:

-----------------------------------我的头衔------------ -----------------

有没有办法在CSS中做到这一点?没有所有“ - ”破灭显然。

234
Jason

这大致是我要做的:通过在包含border-bottom上设置h2然后给h2一个更小的line-height来创建该行。然后将文本放入具有非透明背景的嵌套span中。

HTML:

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

CSS:

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

我只在Chrome中测试过,但没有理由不在其他浏览器中使用。

JSFiddle: http://jsfiddle.net/7jGHS/

321
Darko Z

尝试不同的解决方案后,我有一个有效的不同文本宽度,任何可能的背景,而不添加额外的标记。

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}
<h1>Heading</h1>
<h1>This is a longer heading</h1>

我在IE8,IE9,Firefox和Chrome中测试过它。你可以在这里查看 http://jsfiddle.net/Puigcerber/vLwDf/1/

221
Puigcerber

好吧,这个更复杂,但除了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%)非常依赖于文本内部的宽度..必须考虑解决方案。至少top: 1.2em确保线条或多或少保持在文本的中心,即使你有不同的字体大小。

它确实似乎运作良好: http://jsfiddle.net/tUGrf/3/

54
Stephan Muller

又一种方法:

span:after,
span:before{
    content:"\00a0\00a0\00a0\00a0\00a0";
    text-decoration:line-through;
}
<span> your text </span>
37
Rafael

这是基于Flex的解决方案。

HTML:

<h1>Today</h1>

CSS:

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}

JSFiddle: https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

26
Tsuneo Yoshioka

对于以后(今天)的浏览器,display:flexpseudo-elements使得绘图变得容易。 border-stylebox-shadow甚至background也有助于化妆。 demo below

h1 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}
<h1>side lines via flex</h1>
17
G-Cyr
.hr-sect {
        display: flex;
        flex-basis: 100%;
        align-items: center;
        color: rgba(0, 0, 0, 0.35);
        margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
        content: "";
        flex-grow: 1;
        background: rgba(0, 0, 0, 0.35);
        height: 1px;
        font-size: 0px;
        line-height: 0px;
        margin: 0px 8px;
}
<div class="hr-sect">Text</div>
9
Sujal Patel
<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

为跨度填充以在文本和行之间留出更多空间。

示例: http://jsfiddle.net/tUGrf/

9
Stephan Muller

我一直在寻找这个简单装饰的一些解决方案,我发现了很多,有些奇怪,有些甚至用JS来计算字体的高度和bla,bla,bla,然后我读了一篇关于这篇文章,并阅读 thirtydot 关于fieldsetlegend的评论,我认为就是这样。

我正在重写那两个元素样式,我想你可以复制它们的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;
}
7
legnaleama

IE8和更新的解决方案......

值得注意的问题: /

使用background-color来掩盖边框可能不是最佳解决方案。如果您有复杂(或未知)的背景颜色(或图像),则屏蔽最终会失败。此外,如果您调整文本大小,您会注意到白色背景颜色(或您设置的任何颜色)将开始覆盖上方(或下方)行上的文本。

您也不希望“guesstimate”各个部分的宽度,因为它使得样式非常不灵活,几乎不可能在内容宽度发生变化的响应式网站上实现。

解决方案:

查看 JSFiddle

不要使用background-color“屏蔽”边框,而是使用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; }

通过将font-size属性放在.group元素上来调整文本大小。

限制: /

  • 没有多行文字。仅限单行。
  • HTML标记并不优雅
  • .line元素上的top属性需要是line-height的一半。所以,如果line-height1.5em,那么top应该是-.75em。这是一个限制,因为它不是自动化的,如果您在具有不同行高的元素上应用这些样式,那么您可能需要重新应用line-height样式。

对我来说,这些限制超过了我在大多数实现的答案开头所提到的“问题”。

5
Mike McLin

这为您提供了静态线宽,但效果很好。通过添加或取'\ 00a0'(unicode空间)来控制线宽。

h1:before, h1:after {
  content:'\00a0\00a0\00a0\00a0';
  text-decoration: line-through;
  margin: auto 0.5em;
}
<h1>side lines</h1>
4
tomyo

从这么多的选择中我更喜欢 这个答案 因为它跨越了当今的浏览器。

我使用它多于我的主页。因为建议只有一个<h1>特别是在主页面上。因此有必要将h1更改为h2或更高版本。

h2 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h2:before, h2:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}
<h2>side lines via flex</h2>
3
Chetabahana
h6 {
    font: 14px sans-serif;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}

    h6.background {
        position: relative;
        z-index: 1;
        margin-top: 0%;
        width:85%;
        margin-left:6%;
    }

        h6.background span {
            background: #fff;
            padding: 0 15px;
        }

        h6.background:before {
            border-top: 2px solid #dfdfdf;
            content: "";
            margin: 0 auto; /* this centers the line to the full width specified */
            position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            width: 95%;
            z-index: -1;
        }

这会对你有所帮助


2
Dominic Amal Joe F

我使用表格布局动态填充边,0高度绝对位置div用于动态垂直定位:

enter image description here

  • 没有硬编码的尺寸
  • 没有图像
  • 没有伪元素
  • 尊重背景
  • 控制栏外观

https://jsfiddle.net/eq5gz5xL/18/

我发现低于真正的中心看起来最好用文字;这可以在55%所在的地方进行调整(较高的高度会使条形较低)。可以在border-bottom所在的位置更改行的外观。

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;
}
2
Micropig

如果有人想知道如何设置标题,使其出现与左侧固定的距离(并且没有如上所示居中),我通过修改@ 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

2
m4r73n

不要打败死马,但我正在寻找一个解决方案,最终来到这里,并且我自己对这些选项不满意,尤其是出于某些原因我无法在这里得到所提供的解决方案以便为我工作。 (可能由于我的错误...)但我一直在玩flexbox,这是我为自己工作的东西。

某些设置是硬连线的,但仅用于演示目的。我认为这个解决方案应该适用于任何现代浏览器。只需删除/调整.flex-parent类的固定设置,调整颜色/文本/东西和(我希望)你会像我这样的方法一样快乐。

HTML:

.flex-parent {
  display: flex;
  width: 300px;
  height: 20px;
  align-items: center;
}

.flex-child-Edge {
  flex-grow: 2;
  height: 1px;
  background-color: #000;
  border: 1px #000 solid;
}
.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
}
<div class="flex-parent">
  <div class="flex-child-Edge"></div>
  <div class="flex-child-text">I found this simpler!</div>
  <div class="flex-child-Edge"></div>
</div>

我也在这里保存了我的解决方案: https://jsfiddle.net/Wellspring/wupj1y1a/1/

0
Wellspring

我已经尝试了大多数建议的方法,但结束了一些问题,如全宽,或不适合动态内容。最后我修改了一个代码,并且完美地工作。此示例代码将在之前和之后绘制这些行,并且内容更改灵活。中心对齐了。

_ 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/

0
Fasil kk

对我来说这个解决方案完美无缺......

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;
}
0
طلحة

我不太确定,但您可以尝试使用水平规则并将文本推到其上边距之上。您的段落标记和背景也需要固定的宽度。它有点hacky,我不知道它是否适用于所有浏览器,你需要根据字体的大小设置负边距。虽然适用于铬。

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>
0
Munim