Trouble vertical centering text

Question

I've got a background image (480x360) with two bars (100% width, 20px high) on top, one at the top the other at the bottom. Note that the bars go on top of the image, so they don't add to its size. The end result it's still 480x360.

The issue I'm having is vertical centering the text.

I've searched (links below) and tried several different methods but nothing seems to work.

How do I vertically center text with CSS?

Vertically align text in a div

Absolute Horizontal And Vertical Centering In CSS

It's a single line of text, shouldn't be that hard... I'm probably making some n00b mistake.

It's really important that the text is properlly centered, not just kinda centered...

Can somebody give me a hand? Thanks.

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

You mean the text in the bar above the image?

Wrap the text in the header/footer divs in a <p> </p> tag.

Add

vertical-align:middle;  

to the p.

JSFiddle .

Answer 2

Your problem solved see this link>>>>>> Middle aligned text

Play with line height of paragraph for vertical alignment of text!

Html

---

<div id="panel4" class="panels" style="cursor: move; z-index: 48">
        <div class="title">TITLE | THIS IS THE TITLE</div>
        <div id="picture4">
            <p>Your text</p><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%;
}
#picture4 img{
    z-index:-2;
}
#picture4 p{
    z-index:2;
    position:absolute;
    line-height:360px;
    height:360px;
    width:480px;
    text-align:center;
    vertical-align:middle;
    color:red;
    font-size:22px;
}

Answer 3

Finally!!! I got it to work!

Thank you very much @Dave Salomon and @Eirenaios for your help!

Here's the final code: (hope it helps somebody else in the future)

HTML:

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

CSS:

.panels {
position: absolute;
}

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

#picture4 {
width: 480px;
height: 360px;
}

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

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

span {
vertical-align: middle;
display: inline-block;
line-height: normal;
}