如何设置border-bottom?

Question

html code

<div class="title-content">
<div class="h1">
<h1><strong>stuff</strong></h1>
</div>
</div>

css代码?

我需要css代码，我希望它在页面的中心，而边框只在单词下面，而不是所有的行

Answer 1

如果你只想让标题字符下划线，而不是标题类元素的整个宽度，那么一个简单的文本对齐中心就可以做到这一点，并改变h1显示设置和边框设置。

.title-content {
text-align: center;
}
.h1 {
border-bottom: 1px black solid;
display: inline-block;
}

<div class="title-content">
<div class="h1">
<h1><strong>stuff</strong></h1>
</div>
</div>

如果你想要更复杂的布局，那么研究flex可能会很有用。

Answer 2

您可以使用CSS将其添加到.title-content类。

.title-content {
display: flex;
justify-content: center;
}
.title-content h1 {
border-bottom: 1px solid black;
}

<div class="title-content">
<div class="h1">
<h1><strong>stuff</strong></h1>
</div>
</div>