Question

我对此很新，所以如果我需要更具描述性，请原谅我。我的网站上有一个副标题，我希望以标题为中心。但是，我也想给副标题一个底边框。我希望边框是字幕的等效长度，所以我想我会显示：inline-block和text-align：center。然后，通过底部边框应用。但是，它不起作用。字幕保持与左对齐。我在下面附上了我的HTML和CSS：

Answer 1

我认为您正在寻找：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;    
}

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

更新的答案

您可以使用span下的h2标记并将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

Answer 4

您需要将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-align：center不影响display：inline-block

4 个答案: