html - 文本垂直居中问题

Question

我有一张背景图片 (480x360)，顶部有两个条(100% 宽，20 像素高)，一个在顶部，另一个在底部。请注意，条形图位于图像的顶部，因此它们不会增加图像的大小。最终结果仍然是 480x360。

我遇到的问题是文本垂直居中。

我已经搜索(下面的链接)并尝试了几种不同的方法，但似乎没有任何效果。

How do I vertically center text with CSS?

Vertically align text in a div

Absolute Horizontal And Vertical Centering In CSS

这是一行文本，不应该那么难...我可能犯了一些 n00b 错误。

文本正确居中非常重要，而不仅仅是居中......

有人可以帮帮我吗？谢谢。

HTML:

<div id="panel4" class="panels" style="cursor: move; z-index: 48">
<div class="title">TITLE | THIS IS THE TITLE</div>
<div id="picture4"><img src="http://i.imgur.com/fbEGCcY.png" width="480" height="360"></div>
<div class="footer">FOOTER | THIS IS THE FOOTER</div>
</div>

CSS:

.panels {
position: absolute;
}

#panel4 {
display: inline-block;
position: relative;
}

.title {
position: absolute;
font-family: Monaco;
font-size: 10px;
line-height: 20px;
text-align: left;
height: 20px;
color: #fff;
background: #000000;
width: 100%;
text-indent: 6px;
}

.footer {
position: absolute;
font-family: Monaco;
font-size: 10px;
line-height: 20px;
text-align: right;
bottom: 0;
color: #fff;
background: #000000;
width: 100%;
}

JSFiddle

Answer 1

你是说图片上方栏中的文字？

将页眉/页脚 div 中的文本包装在

标记中。

添加

vertical-align:middle;  

到p。

JSFiddle .