1

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

我的 HTML

我的 CSS

我的页面目前的样子

4

4 回答 4

3

我想你正在寻找这个：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;    
}
于 2012-07-26T04:58:12.067 回答
1

解决问题的快速方法是摆脱display: inline-block;和border-bottom添加text-decoration: underline属性。检查此 JSFiddle以查看结果。

于 2012-07-26T04:47:53.703 回答
0

只给出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

于 2012-07-26T04:50:43.660 回答
0

您需要应用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 演示起作用的原因：此代码存在，尽管答案文本中未提及。填充的使用与问题无关。）

于 2012-07-26T05:15:35.030 回答