html - 使用 CSS 将文本居中，在空白区域填充分隔线

Question

摘要

我想创建一个以日期为中心的元素，并且在左侧和右侧，应该有一行(如 <hr> )填充空白。

示例(我想要创建的)

我的尝试(代码片段)

我尝试了几种不同的方法来实现这一目标，但我的知识仍然有限。您能解释一下我如何实现我的目标吗？

.post-container .blog-post .post-date hr {
  color: #212931;
  width: 30%;
  vertical-align: middle;
}

.post-date .right {
  position: absolute;
  right: 0;
  top: 0;
  margin-right: 5%;
}

.post-date p {
  font-size: 20px;
  display: inline-block;
  position: absolute;
  transform: translateY(-15px);
  color: #212931;
  margin: 0 auto;
}

<div class="post-date">
  <hr class="left" />
  <p>2023/06/25</p>
  <hr class="right" />
</div>

Answer 1

避免使用旧的 HTML 元素，例如 <hr> 。相反，使用现代解决方案，如 display: grid或display: flex ，以及伪元素，例如 ::before和::after

.post-date {
  font-size: 30px;
  display: flex;
  gap: 20px; /* padding between line and text */
  align-items: center;
}

.post-date::before, .post-date::after {
  flex: 1;
  content: '';
  padding: 1px;
  background-color: grey;
  margin: 5px;
}

<div class="post-date">2023/06/25</div>

更多信息

display: flex -MDN
gap: 20px - flex/grid property - MDN

::before -MDN
::after - MDN