文本两侧的短水平线[重复]答案

【问题标题】：Short horizontal lines on boths sides of text [duplicate]文本两侧的短水平线[重复]
【发布时间】：2016-05-27 14:24:00
【问题描述】：

我遇到了solution here，但这不是我所需要的，原因有两个：

我不知道如何使线条的宽度更短。
该解决方案定义了 H2，我已经在网站上的当前 css 中定义了 h2。我更喜欢一个独特的 css 类作为定义，这样它就不会发生冲突。下图显示了我想要实现的目标。基本上，斜体的h2文本+两侧较短的水平线，居中，像这样Lines with text in the middle

如果有任何帮助，我将不胜感激。我将在 Wordpress 中使用代码谢谢。

【问题讨论】：

您可以使用 :before 和 :after css 属性来实现这一点
不一定非得是H2，你可以随便选择

标签： html css wordpress

【解决方案1】：

这是 unique 类line 的示例，因此您可以将该类应用于任何元素，并且两边都会有线条。您还可以更改line:after 和line:before 上的线条宽度

.parent {
  text-align: center;
}

.line {
  font-size: 30px;
  position: relative;
  display: inline-block;
  margin: 0;
}

.line:after, .line:before {
  content: '';
  width: 50px;
  position: absolute;
  top: 50%;
  height: 1px;
  background: black;
}

.line:before {
  left: 0;
  transform: translate(-120%, -50%);
}

.line:after {
  right: 0;
  transform: translate(120%, -50%);
}

<div class="parent">
  <p class="line">Lorem ipsum</p>
</div>

【讨论】：

感谢它的工作，但由于某种原因，代码使我主页上的每个文本都居中。我怀疑它与您代码中的“正文”有关。如果您能想出一些不会影响主页上其他所有内容的内容，我将不胜感激，仅此特定文本需要以 2 行为中心。非常感谢。
只需为text-align: center 使用其他父 div 而不是 body，我使用 body 只是为了演示目的。
感谢 Nenad，但我是新手 :) 只是一个试图为她的网站学习一些 CSS 的女孩。我尝试了一些东西，但没有奏效，删除“body”使其左对齐。如果您可以重新粘贴代码（只是顶部/第一行，这样我就可以看到如何放置您提到的“文本对齐：中心”。再次感谢并为您带来的麻烦感到抱歉。
@Paola 我更新了我的答案看看。
它工作得很好，你是一个救生员。太感谢了！ :)

【解决方案2】：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">

<style>
    .line-center{
        margin:0;padding:0 10px;
        background:#fff;
        display:inline-block;
    }
    div{
        text-align:center;
        position:relative;
        z-index:2;
        width: 100px;

    }
    div:after{
        content:"";
        position:absolute;
        width: 100px;
        top:50%;
        left:0;
        right:0;
        border-top:solid 1px black;
        z-index:-1;
    }
</style>

</head>
<body>
<div>
    <span class="line-center">Test</span>
</div>



</body>

【讨论】：