我对此很陌生，所以如果我需要更具描述性，请原谅我。我的网站上有一个副标题，我希望以标题为中心。但是，我也想给字幕一个底部边框。我希望边框与字幕的长度相同，所以我想我会显示：inline-block 和 text-align: center。然后，通过底部边框应用。但是，它不起作用。字幕保持与左侧对齐。我在下面附上了我的 HTML 和 CSS：
【问题讨论】：
我想你正在寻找这个：SEE DEMO
通过应用 padding-bottom，您可以实现这一点。
CSS：
h2 {
font-family: Georgia;
font-style: italic;
font-size: 25px;
color: black;
padding-bottom:5px;
border-bottom: 1px solid #000;
display: inline-block;
}
【讨论】：
解决问题的快速方法是删除 display: inline-block; 和 border-bottom 并添加 text-decoration: underline 属性。 Check this JSFiddle查看结果。
【讨论】：
您需要将text-align: center 应用于包含h2 而不是h2 本身的块，因为当元素已变为内联块时（为了将其宽度设置为所需的最小宽度按内容），将其内容居中是没有用的。 （这只会使包含在与文本宽度相同的框中的文本居中。）
问题可以简化为：
<!DOCTYPE html>
<style>
h2 {
display: inline-block;
border-bottom: 1px solid black;
text-align: center;
}
</style>
<hgroup>
<h1>Ken Fedor</h1>
<h2>Designer. Developer. Dreamer.</h2>
</hgroup>
这里的解决方法是在样式表中添加以下内容：
hgroup {
text-align: center;
}
（这就是 A.K 的答案中的 jsfiddle 演示起作用的原因：这段代码在那里，但答案文本中没有提到。填充的使用与问题无关。）
【讨论】：
只给text-decoration:underline;而不是border-bottom；
HTML
<h1>tittle</h1>
<h2>subtittle</h2>
CSS
h1 {
text-align:center;
}
h2 {
text-align:center;
text-decoration:underline;
}
查看演示：- http://tinkerbin.com/7LQqmXkZ
更新答案
您可以使用h2 下的span标签并将border-bottom 给span 标签而不是给padding-bottom 所以我希望你能得到你想要的结果....
HTML
<h1>tittle</h1>
<h2><span>subtittle</span></h2>
CSS
h1 {
text-align:center;
}
h2 {
text-align:center;
}
h2 span {
border-bottom:1px solid red;
padding-bottom:5px;
}
【讨论】：