Placing a text over an image with HTML and CSS

Question

I have a div containing a title text and an image.

With the code below, the title is showing just above the image.

HTML code:

<div class="thumbnail">
  <div class="text">
  <center>Heading</center>
  </div>
  <div class="image">
  <img src="sample.png">
  </div>
</div>

I would like to align the title so that it will appear on the center (vertically and horizontally) of the image.

How can I achieve that using HTML and CSS?

The `center` element is deprecated and you shouldn't use it. — James Donnelly, Mar 20 '14 at 14:28
You can find the answer here: http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css — abe, Mar 20 '14 at 14:30
It make align horizontally center. I want to align it vertically middle. @JamesDonnelly — Gijo Varghese, Mar 20 '14 at 14:30
@user3392772 http://en.wikipedia.org/wiki/Deprecation you can center the text horizontally by applying css to text div — Huangism, Mar 20 '14 at 14:32
@user3392772 You may want to accept one of the answers as the correct one ;) — benomatis, Mar 21 '14 at 07:18

benomatis · Answer 1 · 2014-03-20T14:48:50.540

1

You could remove the image tag and make the image be the background of the container div.

HTML

<div class="text">
    Heading
</div>

CSS

.text {
    background-image: url('sample.jpg');
    text-align: center;
}

EDIT: I don't want to sell it as my perfect answer, but I realized I missed the vertical alignment, and as similar solutions have already been provided here in comments and answers, let me just provide you with a good source of info below. The point is that you could use vertical-align:middle if you used span or other inline element, but with div, you have to use other tricks like position:absolute and minus margins.

Source: http://phrogz.net/css/vertical-align/index.html

edited Mar 20 '14 at 14:48

answered Mar 20 '14 at 14:32

benomatis

5,536
7
36
59

i cannot use this. Because the image always changes. There are lot such thumbnails... (done using PHP) – Gijo Varghese Mar 21 '14 at 15:52
like I said, there are other options, check out my link or the answers others gave... – benomatis Mar 21 '14 at 23:21
sorry i didn't got it – Gijo Varghese Mar 22 '14 at 09:19
sorry, what did you not get? – benomatis Mar 22 '14 at 09:20
the thing has to be responsive too... the answer i marked got it worked @webeno – Gijo Varghese Mar 22 '14 at 09:38
well, I'm happy you got your answer ;) – benomatis Mar 22 '14 at 09:51

score 0 · Accepted Answer · answered Mar 20 '14 at 14:41

Your markup is mostly correct with the exception of using the center element and you do not need to wrap the img element in a div.

Here is some example markup:

<div class="thumbnail">
  <h1>Heading</h1>
  <img src="sample.png">
</div>

And its corresponding CSS:

.thumbnail {
  position:relative;
}
.thumbnail h1 {
  text-align:center;
  position:absolute;top:50%;left:0;width:100%;
  margin-top:-20px; /*make the negative top margin = half your h1 element height */
}

You could always use an element other than an h1 to hold your title. This just depends on your preference.

score 0 · Answer 3 · answered Mar 20 '14 at 15:26

The following might help you.

HTML:

<div class="thumbnail">
    <div class="text">
         Heading
    </div>
</div>

CSS:

.text {
    background-image: url('http://cs616623.vk.me/v616623331/7991/vPKjXbo-c7o.jpg');
    width: 320px;
    height: 240px;
    line-height: 240px;
    vertical-align: middle;
    text-align: center;
    font-size: 48px;
}

Take into account that in this approach you would have to set manually the height and the width of your text element. Moreover, the height should be duplicated in the line-height in order for vertical alignment to work correctly.

You could test and change the code in the corresponding JSFiddle or just check the full-screen result.

i cannot put the image in css. Because the image url changes for different thumbnails — Gijo Varghese, Mar 22 '14 at 09:20
Oh, I see! Please, consider adding these details to your question in order to make it more specific. That way you will receive the answers in a shorter manner :) — dnl-blkv, Mar 22 '14 at 11:13

Natalie Hedström · Answer 4 · 2014-03-21T12:46:02.120

I wouldn't recommend using lineheight to vertically align the text(as some answers suggest) solely because if the header is to long and spans over across two rows it would look terrible.

What I would do is to absolute position the heading and then use display: table-cell to vertical align it.

Note that to be able to use this solution you have to specify an height for the heading.

HTML

<div class="thumbnail">
  <div class="text">
      <h1>Heading</h1>
  </div>
  <div class="image">
      <img src="http://placehold.it/350x250" />
  </div>
</div>

CSS

  .thumbnail{
    position: relative; 
    display: inline-block;
}
.text{
    position:absolute; 
    top: 0px; 
    left: 0px; 
    width: 350px;
}
.text h1{
    height: 250px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;  
    width: 350px; 
    color: #fff;
}

JSfiddle here

Placing a text over an image with HTML and CSS

4 Answers4