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

Which text? Title ? Footer? BTW , you could use a combination of padding and line height to center the text vertically. Most of the time Line-Height works. — Abhinav Gauniyal, Jul 27 '14 at 18:38

score 0 · Answer 1 · answered Jul 27 '14 at 18:41

0

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.

answered Jul 27 '14 at 18:41

Dave Salomon

3,287
1
17
29

Isn't it already in the middle when it's 20px? Slight modification, http://jsfiddle.net/Mq5X6/5/ . Removed any padding/margin from p. Change height and line-height to be the same on .title. Seems to be in the middle for me at 10px, 20px and 70px..? – Dave Salomon Jul 28 '14 at 09:35
On jsfiddle it does look right, but I've copied the code to dreamweaver (new file, so no other code/styles) and previewed it safari and... http://i.imgur.com/Q6xEfbX.png it's clearly not in the middle! – Cheng Zhaa Jul 28 '14 at 10:18

score 0 · Answer 2 · answered Jul 27 '14 at 18:58

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

You misunderstood it. I don't want to add any text. I want to vertically center "TITLE | THIS IS THE TITLE" and "FOOTER | THIS IS THE FOOTER" inside those black bars. — Cheng Zhaa, Jul 28 '14 at 08:43

score 0 · Accepted Answer · answered Jul 28 '14 at 18:58

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

Trouble vertical centering text

3 Answers3