如何在标题元素有限下划线的同时将其保持在中心（使用 text-align）？

Question

我想在使用 text-align: center.但是，同时使用 border-bottom(for underline) 和 text-align: center，下划线会一直延伸到页尾。还有其他方法可以实现吗？希望你理解我的问题。提前致谢。

  h1 {
  text-align: center;
  margin: 5px;
  font-family: "Playfair Display", serif;
  color: #353935;
  border-bottom: 4px double black;

<h1>Heading Text</h1>

Kalpana Chawla 是我元素的内容。如您所见，下划线在 'K' 之前就开始了，在 'a' 的远处结束。我希望下划线仅从 K' 开始并在 'a' 处结束，同时将标题保持在中间。

Answer 1

我希望这就是你要找的，使用 text-decoration: underline

h1 {
  text-align: center;
  margin: 5px;
  font-family: "Playfair Display", serif;
  color: #353935;
  text-decoration: underline double;
  }

<h1>Heading Text</h1>

Answer 2

您可以制作标题 inline-block 并将其置于容器元素的中心。

h1 {
  display: inline-block;
  margin: 5px;
  font-family: "Playfair Display", serif;
  color: #353935;
  border-bottom: 4px double black;
}

.text-center {
  text-align: center;
}

<div class="text-center">
  <h1>Heading Text</h1>
</div>

如何在标题元素有限下划线的同时将其保持在中心（使用 text-align）？

How can I underline a Heading element finitely while keeping it in the center(using text-align) at the same time?

html

javascript

css

visual-web-developer