设置宽度后水平线间文本无法居中的问题解决咨询

嘿，我来帮你搞定这个问题！你遇到的情况是因为给<h2>设置了固定宽度200px，导致text-align: center只能在这个200px的范围内生效，伪元素的横线也被限制在这个宽度里，看起来文本就没有真正居中到页面或者父容器的中间。

这里有两种可行的解决方案，你可以根据自己的需求选择：

方案一：移除<h2>的固定宽度 #

让<h2>默认撑满父容器的宽度，这样text-align: center就能让内部的<span>在整个父容器的水平中间位置显示，伪元素的横线也会贯穿父容器，完美实现文本在横线中间居中的效果。修改后的代码如下：

<h2><span class="line-center">Test</span></h2>

.line-center {
  margin: 0;
  padding: 0 10px;
  background: #fff;
  display: inline-block;
}

h2 {
  text-align: center;
  position: relative;
  z-index: 2;
  /* 移除width: 200px */
}

h2:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: solid 1px red;
  z-index: -1;
}

方案二：保留固定宽度，让<h2>自身居中 #

如果你确实需要保留<h2>的200px宽度，只需要给<h2>加上margin: 0 auto，让<h2>本身在父容器里居中，这样内部的文本和横线都会跟着<h2>一起居中，同样能达到你想要的效果。修改后的代码如下：

<h2><span class="line-center">Test</span></h2>

.line-center {
  margin: 0;
  padding: 0 10px;
  background: #fff;
  display: inline-block;
}

h2 {
  text-align: center;
  position: relative;
  z-index: 2;
  width: 200px;
  margin: 0 auto; /* 新增这一行 */
}

h2:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: solid 1px red;
  z-index: -1;
}

简单来说，核心问题就是你设置的固定宽度限制了居中范围，要么去掉宽度让<h2>撑满父容器，要么让<h2>自身在父容器里居中，两种方式都能解决文本不居中的问题~

备注：内容来源于stack exchange，提问作者Jskccc