Question

This may seem like a standard question, but I’m after some ‘best practice’ here. Around the web (a good example is designspiration.net) you have sites that have images, that when hovered, reveal a block/alpha colour with text (usually a title, caption or number) positioned in the centre both horizontally and vertically.

In the past I’ve usually hacked my way through to achieve this effect, but it would be great to know the best and most effective/semantic way to do this (CSS? jQuery? Both?)

If you look at the designspiration landing page and hover over the images, you’ll get the idea. Note these images don’t have a fixed height.

Any implementation would be really appreciated (jsFiddle etc) and hopefully this’ll help others.

Many thanks
Richard

Answer 1

Use vertical-allign: middle;!
http://jsfiddle.net/zR4kk/

You just have to make your container display:table
And your content display: table-cell

HTML

<div class="area">
     <p>To look best, text should really be centered inside this div both vertically and horizontally.</p>
</div>​

CSS

.area { 
  width: 300px; 
  height: 300px; 
  background: green; 
  display:table;
    padding:5px;
}

.area p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}​