时间戳

首页 > 解决方案 > 如何显示居中文本的 h1，其下划线小于 h1？

html - 如何显示居中文本的 h1，其下划线小于 h1？

问题描述

如何显示居中文本的 h1，其下划线小于 h1？

代码：我为我的 H1 标签使用了以下 CSS 代码，我给了一个课程：

.referenzen{
  display:inline-block;
  position:center; 
}

.referenzen::after{
  content:'';
  height:2px;
  width:20%;
  background:#f24432;
  position:absolute;
  left:calc(50% - 10%);
  bottom:-5px;

}

问题：H1 没有居中。

谢谢！

标签： htmlcss

解决方案

您需要使用position: relative;和text-align: center;。财产没有center价值。position

.referenzen{
  display:inline-block;
  position:relative;
  text-align: center;
  left:50%;
  transform: translateX(-50%);
}

.referenzen::after{
  content:'';
  height:2px;
  width:20%;
  background:#f24432;
  position:absolute;
  left:calc(50% - 10%);
  bottom:-5px;

}
<h1 class="referenzen">Title</h1>

推荐阅读