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

Question

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

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

有没有办法在CSS中做到这一点？没有所有" - "破灭显然.

Answer 1

这大致是我如何做到的:通过border-bottom在包含上设置a h2然后给出h2更小的线来创建线line-height.然后将文本放入span具有非透明背景的嵌套中.

HTML:

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

CSS:

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

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

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

Answer 2

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

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/

Answer 3

好吧,这个更复杂但它适用于除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/

Answer 4

又一种方法:

span:after,
span:before{
    content:"\00a0\00a0\00a0\00a0\00a0";
    text-decoration:line-through;
}

<span> your text </span>

Answer 5

   <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 的回答的启发

Answer 6

这是基于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/

Answer 7

对于以后(nowdays)浏览器,display:flexandd pseudo-elements 使得绘制变得容易.border-style,box-shadow甚至background对化妆也有帮助.

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>

Answer 8

我认为最直接的方法是使用 CSS 网格。

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
}

h1::before,
h1::after {
  content: "";
  border-top: 0.1rem double black;
  align-self: center;
}

<h1>Heading</h1>

Answer 9

.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>

Answer 10

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

Answer 11

我一直在寻找这个简单装饰的一些解决方案,我发现了很多,有些奇怪,有些甚至用JS来计算字体的高度和bla,bla,bla,然后我读了一个对这个职位和读取评论thirtydot谈论 fieldset和legend我认为这是它.

我推翻了这两个元素的样式,我想你可以为它们复制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;
}

Answer 12

这为您提供固定长度的线条，但效果很好。行长度通过添加或使用 '\00a0'（unicode 空间）来控制。

h1:before, h1:after {
  content:'\00a0\00a0\00a0\00a0';
  text-decoration: line-through;
  margin: auto 0.5em;
}

<h1>side lines</h1>

Answer 13

CSS 网格来救援

与上面的答案类似，这也可以使用CSS Gridsflex来完成。这为您提供了更大的范围来抵消标题，并提供了一种更简单的方法来扩大行（使用）和内容（使用）之间的差距。grid-template-columnsgrid-gap

与 flex 方法相比，此方法的优点是能够轻松偏移行，此外只需在列之间添加一次间隙（而不是两次，对于每个:before和:after伪元素）。在我看来，它在语法上也更加清晰和明显。

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  grid-gap: 1rem;
}

h1:before,
h1:after {
  content: "";
  display: block;
  border-top: 2px solid currentColor;
}

h1.offset {
  grid-template-columns: 1fr auto 3fr;
}

h1.biggap {
  grid-gap: 4rem;
}

<h1>This is a title</h1>

<h1 class="offset">Offset title</h1>

<h1 class="biggap">Gappy title</h1>

<h1>
  <span>Multi-line<br />title</span>
</h1>

Answer 14

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

值得注意的问题:

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

您也不想"猜测"这些部分的宽度,因为它使得样式非常不灵活,并且几乎无法在内容宽度发生变化的响应式网站上实现.

解:

(查看JSFiddle)

background-color使用您的display财产,而不是"掩盖"与a的边界.

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标记并不优雅
• top.line元素上的属性需要是一半line-height.所以,如果你有一个line-height的1.5em,那么top应该是-.75em.这是一个限制,因为它不是自动化的,如果您在具有不同行高的元素上应用这些样式,那么您可能需要重新应用您的line-height样式.

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