使用css，在标题下添加一个副标题

Question

我试图在页面标题下面添加一个字幕。我在现有标题的左侧有一个图像，标题位于图像中间。我试图在标题下面用较小的字体添加字幕，但我似乎无法弄明白。我使用的代码是这样的：

<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="clear"></div>
</div>  
</div>
</div>


.container {
display:table;
width:100%;
height:auto;
background-color:#171717;
}
.container .text {
display:table-cell;
height:100%;
vertical-align:middle;
font: bold 70px Verdana;
color: #666666;
}

以及这里的内容：

（我不包括菜单的代码，即使它在图片中）。

我想要实现的目标是：

有没有人有任何想法？

Answer 1

您有div.text，其中包含您的标题。在下面你需要放置你的副标题。此代码称为＆＃34; html标记＆＃34;。您应该使用<h1> - <h6>标记作为标题。

以下是一个示例（fiddle）

＆＃13;

＆＃13;

.header {
  text-align: center;
}
.header img {
  float: left;
}
.clear {
  clear: both;
}

＆＃13;

<div class="header">
  <img src="http://dummyimage.com/100/000000/fff" />
  <h1>Hello world</h1>
  <h2>This is a subtitle</h2>
  <div class="clear"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

预览：

Answer 2

You can in fact do this with CSS.

div.text {
    font-size: 32px;
    font-weight: bold;
    display: inline-block;
    color: #fff;
    vertical-align: top;
    padding: 2px 1em;
}

div.text:after {
    display: block;
    text-align: center;
    font-size: 20px;
    margin-top: 1em;
    content: "This is the subtitle";
}
.container {
    background-color: #111;
    display: inline-block;
}
.container img {
    display: inline-block;
}

现在，无论你应该用CSS做到这一点完全是另一个问题。实际上是页面消息的一部分的内容应该是页面的一部分，而不是样式表的一部分。

此外，您的“容器”应该是<h1>标记。此外，您不需要关闭<img>标签，并且自动关闭标签在HTML5文档中是毫无意义的（您可能会或可能不会这样）。

Answer 3

可能有100种不同的方式来实现这一点......这是一个。在您的文字行中，只需使用<br />和<span>

即可

<div class="text">This is the Title<br /><span>The SubTitle would go here</span></div>

然后像这样设计你的字幕：

.container .text span {
    /* Something styled here */
}

Answer 4

你的使用的html可以改进，因为它不太合适。 试试这样的事情

<div class="header">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<h1>this is the title</h1>
<h3>This is the subtitle<h3>
</div>  


.header{
overflow:hidden
}

.header img {
float:left;
}

.header{
text-align:center;
}

Answer 5

尝试一下：

<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="subtitle">My subtitle</div>
<div class="clear"></div>
</div>  
</div>
</div>

.text {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.subtitle {
    margin-top: 0px;
    padding-top: 0px;
}

Answer 6

谢谢，@Sergio S。这对我有用。一种更通用的方法，基于塞尔吉奥的回答（如下）：

CSS:
.classofheadertext {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.classofsubtitletext {
    margin-top: 0px;
    padding-top: 0px;
}

再次感谢塞尔吉奥。我只是把它写成简单的形式：D