居中标题下方左侧对齐边框的实现方案求助

嘿，这个场景我太熟悉了！你遇到的核心问题是默认块级的h1会占满父容器宽度，所以即使标题文本居中，伪元素的左对齐是相对于容器左边缘，而不是标题文本的左边缘。下面给你两种简单有效的解决思路：

方法一：让h1宽度适配文本（最推荐） #

这个方法最直观，也兼容所有现代浏览器：

1. 给h1的父容器设置text-align: center，让标题整体居中；
2. 把h1改成display: inline-block，这样它的宽度会刚好包裹住标题文本，而不是撑满容器；
3. 修正你伪元素里的颜色属性（你之前写的color:#fff是文字颜色，伪元素是空内容，应该用background-color才能显示出边框）。

最终代码如下：

/* 父容器控制标题居中 */
.title-container {
  text-align: center;
}

h1 {
  display: inline-block; /* 关键：让h1宽度适配文本内容 */
}

h1:after {
  content: '';
  display: block;
  height: 4px;
  width: 60px;
  margin: 9px 0 0 2px;
  background-color: #fff; /* 替换color为background-color */
}

这样设置后，h1会在父容器里居中，而伪元素的左对齐是相对于标题文本的左边缘，完全符合你的需求。

方法二：用Flex布局实现 #

如果你更喜欢用Flex，也可以这样写：

.title-container {
  display: flex;
  justify-content: center; /* 让h1在容器中水平居中 */
}

h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 让内部元素（文本+伪元素）左对齐 */
}

h1:after {
  content: '';
  height: 4px;
  width: 60px;
  margin: 9px 0 0 2px;
  background-color: #fff;
}

通过把h1变成垂直方向的Flex容器，强制内部元素左对齐，同时父容器用Flex让h1整体居中，效果和方法一一致。

小提醒 #

别忘了把伪元素的color:#fff改成background-color:#fff，不然你看不到这条边框哦！

内容的提问来源于stack exchange，提问作者Manuel Corbet