如何使用 HTML CSS 在水平线之间放置文本?

南栀阁 • 2023-12-08 • 编程

有很多方法可以使用 html-css 将居中文本和水平线放置在其两侧

第一种

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: #F3F5F6; padding: 0 5px;">
    Your Text Here
  </span>
</div>

在上面的 HTML 和内联 CSS 中，让我们看一下第一个 div，CSS height属性会将边框线放置在距顶部 20px 的位置，文本居中对齐，使用第二个 div 内联样式，您将得到我们正在创建一个居中文本用于遮盖线条并显示文本的背景

第二种方法（仅CSS）：

在伪元素的帮助下，我们可以将 h1或任何其他文本放置在两条水平线的中心

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>Text here</h1>

输出

THE END