我试着做一个水平规则,中间有一些文本。 例如:

----------------------------------- 我的标题 -----------------------------

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

结果:

其他回答

.hr-sect { 显示:flex; flex-basis: 100%; 对齐项目:中心; 颜色:rgba(0,0,0,0.35); Margin: 8px 0px; } .hr-sect::, {后.hr-sect:: 内容:“”; flex-grow: 1; 背景:rgba(0,0,0,0.35); 身高:1 px; 字体大小:0 px; 行高:0 px; Margin: 0px 8px; } < div class = " hr-sect " > < / div >文本

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

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

<hr><p>def</p>

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。这是一个限制,因为它不是自动的,如果您在具有不同行高的元素上应用这些样式,那么您可能需要重新应用您的行高样式。

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

下面是我对Bootstrap 5的简单解决方案,只使用预定义的类:

<div class="py-3 d-flex align-items-center">
    <hr class="flex-grow-1" />
    <div class="badge bg-secondary">OR</div>
    <hr class="flex-grow-1" />
</div>

结果:

你可以将它作为React组件重用,例如:

export default function Divider({ text }) {
    return <div className="py-3 d-flex align-items-center">
        <hr className="flex-grow-1" />
        <div className="badge bg-secondary">{ text }</div>
        <hr className="flex-grow-1" />
    </div>;
}

我使用一个表格布局来动态填充边和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;
}