文本对齐:居中不影响显示: inline-block

Question

我对此还是个新手，所以如果我需要更多的描述，请原谅。我在我的网站上有一个副标题，我想在标题下居中。然而，我也想给副标题一个下边框。我希望边框的长度等于字幕的长度，所以我想我应该显示: inline-block和text-align: center。然后，通过底部边框进行应用。然而，它不起作用。副标题保持左对齐。我在下面附上了我的HTML和CSS：

My HTML

My CSS

What my page currently looks like

Answer 1

我想你正在寻找这个：

通过应用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;    
}

Answer 2

解决问题的快捷方法是去掉display: inline-block;和border-bottom，然后添加text-decoration: underline属性。Check this JSFiddle查看结果。

Answer 3

只需给出text-decoration:underline;，而不是边框底部；

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;
}

http://tinkerbin.com/gUQO8U7u