Vertically/Horizontally centering text over an img-container

Question

I'm still learning html and css so please be gentle but I'm having trouble centering my text over each individual image container (http://jsbin.com/uwolat/1/edit). I've tried top and height at 50% but it doesn't constrain to the specific parent container. Any help would be greatly appreciated!

ŠimeVidas rather than the face give him feedback. He stated he's new, get off your high horse. user2252219, what SimeVidas is saying is take a look at optimising your HTML for HTML5 - here is a link to get your started: http://www.html5rocks.com/ — danielsan, Jun 26 '13 at 01:50

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Here is the DEMO http://jsfiddle.net/yeyene/7bc7j/1/

Give a class .imgTitle to all of your title p tag. No need separate id for all of them.

The following scripts will align all of them vertically/horizontally center, for any width of text, long or short.

JQUERY

$(document).ready(function() {
    $('.img-container').each(function() {
        // Get a reference to the image.    
        var img = $(this).find('img');
        var p = $(this).find('.imgTitle');
        
        // center the title
        $(this).children('p.imgTitle').css({
           'top':((img.height() - p.height())/2) - 13,
           'left':(img.width() - p.width())/2
        });
        
        // Hide by default.
        img.hide();
        
        $(this).hover(function() {
            img.stop().fadeIn(50);
        }, function() {
            img.stop().fadeOut(1300);
        });
    
    });
});

HTML

<div class="img-container">
  <img src="http://wallpaper-fun.ophibian.com/wallpapers/wallpaper_08.jpg" alt="a" width="100%" height="200" />   
  <p class="imgTitle">Pure Waves</p>  
</div>

score 0 · Answer 2 · answered Jun 26 '13 at 01:50

0

try setting

position:relative; text-align:center;

for your text

answered Jun 26 '13 at 01:50

danecando

63
1
7

position:relative will let you position your element inside the div that contains it – danecando Jun 26 '13 at 01:54

score 0 · Answer 3 · answered Jun 26 '13 at 02:09

The trick is in line-height

LIVE DEMO

Don't repeat your self, remove all the unneeded ID's from your p elements.
Give a class to your <p> elements: <p class="description">Bla bla bla</p>

CSS:

.img-container
{
  /*display: block;*/  /* DIV is already BLOCK level element*/
  /*float: inline;*/   /* Back to school ;) */
  margin:0;
  width: 100%; 
  height: 200px;
  line-height:185px; /* PLAY HERE */
  background: #e5e5e5;
  border-bottom:1px solid #444; /* added just for demo */

  text-align:center; /* to align inner P text */
}

.description
{
    position: absolute;
    width:100%;        
    /*height:200px;*/  /* if needed? */
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
}

Thanks guys! Really appreciated your help. Not sure if this forum uses rep or anything but thumbs up. :) — user2252219, Jun 26 '13 at 03:51

Vertically/Horizontally centering text over an img-container

3 Answers3

JQUERY

HTML