Text Not in the middle of the background image inside a div

Question

I have a background image inside a DIV

CSS code is:

#block_header{
    float:left;
    background-image:url("Block_image_orange.png");
    background-size: 300px 100px;
    width:300px;
    height:100px;
    text-align:center;
    font-size:18px;
    color:#FFF;
}

HTML Code for the image div is:

 <div id="block_header">
                 Block Text
    </div><!--block_header id ends here-->

I want to add a text i.e "Block Text" exactly in the middle of the image but the text always shows at the top of the image. Is there a way i can display text in the middle of the image?

THanks!

score 1 · Accepted Answer · answered Oct 13 '13 at 22:26

1

Try and add this to your #block_header:

line-height: 100px;

Please see sample on this working fiddle http://jsfiddle.net/aGhwA/

answered Oct 13 '13 at 22:26

francisco.preller

6,559
4
28
39

Line-height attribute worked. but i just used line-height: 60px; Thanks for your help. – user2852960 Oct 13 '13 at 22:31
The text will sit in the middle of the line, so yes, adjust accordingly. – francisco.preller Oct 13 '13 at 22:32

Text Not in the middle of the background image inside a div

1 Answers1