Html CSS文本装饰下划线，与文本和下划线宽度相同

我有一个带有下划线的

文本装饰

，我可以通过
显示：表格单元格
使其与文本宽度相同，如下所示：

#登录h1{
颜色：#FFF；
边框底部：2个实心#15b6e5；
文本转换：大写；
字号：700；
文本对齐：居中；
显示：表格单元格；
}

现在我尝试将其居中，我尝试添加包装并添加
display:table
，它将其居中，但下划线的宽度与文本的宽度不同：

#登录。标题包装器{
显示：表格；
宽度：100%；
}

这是HTML


登录

我做错了什么？
这就是你想要实现的目标吗？您可以使用Flexbox轻松地将对象居中。您可以在这里阅读更多关于flex以及如何使用它的信息


.center{
宽度：100%；
填充：20px0；
显示器：flex；
证明内容：中心；
背景色：#cfd2d6；
}
.中心h1{
文字装饰：下划线；
}

登录
这就是您想要实现的目标吗？您可以使用Flexbox轻松地将对象居中。您可以在这里阅读更多关于flex以及如何使用它的信息


.center{
宽度：100%；
填充：20px0；
显示器：flex；
证明内容：中心；
背景色：#cfd2d6；
}
.中心h1{
文字装饰：下划线；
}

登录
问题在于h1是块级元素-因此将拉伸以填充父容器。您需要做的是——使h1不是块级元素并将其居中——或者将文本放在h1内的跨度内，并居中，然后将边框底部应用于跨度

请注意，我在h1或h1跨度上使用的是底部边框，而不是文本装饰。我发现它比文字装饰更好、更容易设计样式和留出空间。但是你可以交换这些，仍然可以得到想要的结果


.example-1.标题包装器{
文本对齐：居中；
}
.示例1 h1{
颜色：#000；
边框底部：2个实心#15b6e5；
文本转换：大写；
字号：700；
显示：内联块；
}
.示例2 h1{
颜色：#000；
文本转换：大写；
字号：700；
文本对齐：居中；
}
.示例2 h1跨度{
边框底部：2个实心#15b6e5；
}
示例1-h1显示：内联块
登录
示例2-h1内的跨度
登录
问题在于h1是块级元素-因此将拉伸以填充父容器。您需要做的是——使h1不是块级元素并将其居中——或者将文本放在h1内的跨度内，并居中，然后将边框底部应用于跨度

请注意，我在h1或h1跨度上使用的是底部边框，而不是文本装饰。我发现它比文字装饰更好、更容易设计样式和留出空间。但是你可以交换这些，仍然可以得到想要的结果


.example-1.标题包装器{
文本对齐：居中；
}
.示例1 h1{
颜色：#000；
边框底部：2个实心#15b6e5；
文本转换：大写；
字号：700；
显示：内联块；
}
.示例2 h1{
颜色：#000；
文本转换：大写；
字号：700；
文本对齐：居中；
}
.示例2 h1跨度{
边框底部：2个实心#15b6e5；
}
示例1-h1显示：内联块
登录
示例2-h1内的跨度
登录
you where几乎好，保留表格并删除宽度：100%并添加边距：autoyou where几乎好，保留表格并删除宽度：100%并添加边距：auto