I need to center text vertically within a DIV without using fixed pixel heights, only percentages. Here's my current setup:
<div style="position:relative; width: 100%; height: 100%;">
<img src="images/thumb-member-placeholder.gif" alt="" class="myImage" />
<div class="myText" style="display: inline-block; position: absolute; z-index:500; text-align:center;">Image Text</div>
</div>
I have multiple similar divs with varying text lengths that I want to center vertically.
To achieve this, I am using jQuery to detect the height and set the top value accordingly:
$(window).load(function() {
var imageHeight = $('.myImage').height();
$('.myText').each(function() {
var textHeight = $(this).height();
var vertAdj = ((imageHeight - textHeight) / 2);
$(this).css('top', vertAdj);
});
});
However, this method is not yielding the desired result. The top value remains constant and doesn't adjust for multi-line text in "myText". Any ideas on how to fix this issue?