使用css，在标题下方添加字幕

我正在尝试在我的页面标题下添加一个副标题。我在现有标题的左边有一个图像，标题在图像的中间居中。我想在标题下面加一个小字体的字幕，但我似乎想不出来。我使用的代码如下所示：

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

这是标题
.集装箱{
显示：表格；
宽度：100%；
高度：自动；
背景色：#171717；
}
.container.text{
显示：表格单元格；
身高：100%；
垂直对齐：中间对齐；
字体：粗体70px Verdana；
颜色：#666666；
}

下面是它的样子：

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

我想实现的是：

---

有人有什么想法吗？

大概有100种不同的方法可以做到这一点。。。这里有一个。在文本行中，只需使用

和

---

您有一个包含标题的

div.text

。下面，你需要放置你的字幕。此代码称为“html标记”。您应该为标题使用

-

标记

下面是一个例子（）

.header{
文本对齐：居中；
}
.标题img{
浮动：左；
}
.清楚{
明确：两者皆有；
}

你好，世界
这是一个副标题

您使用的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;
}

这是标题
这是副标题
.标题{
溢出：隐藏
}
.标题img{
浮动：左；
}
.标题{
文本对齐：居中；
}

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

此外，您的“容器”可能应该是一个

标记。此外，您不需要关闭

标记，而在HTML5文档中，自动关闭标记是毫无意义的（我想您的文档可能是，也可能不是）。

尝试以下方法：

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

这是标题
我的字幕
.文本{
边缘底部：0px；
垫底：0px；
}
.副标题{
边际上限：0px；
填充顶部：0px；
}

谢谢，@Sergio S。这对我很有用。根据塞尔吉奥的回答，更一般的做法如下：

---

塞尔吉奥再次获得了全部荣誉。我只是简单地说了一下：D

伪元素不应该包含实际内容。当然？不确定为什么会被否决-这是一个有效的答案。谢谢你。向上箭头也不错。

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

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

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

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

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