Is there an easy way to vertically center text of unknown height within a div of known height? I've experimented with the css display: table-cell option without success, so I'm currently using jQuery to detect the height and apply a top margin if necessary for centering. While this method works well for adjusting, it fails to readjust when needed.
Here is the function in question:
function change_trend(){
trend_text = $('#trends_holder img:eq(' + item_count + ')').attr('data-content');
$('.trend_text').text(trend_text);
var trendMargin = $('.trends_scroller').height() - $('.trend_text').innerHeight();
$('.trend_text').css('marginTop', trendMargin);
}
The trendMargin variable is always either zero or twelve. Initial setup works fine when it's zero, but causes issues when set to twelve as it doesn't revert back to zero properly. How can I achieve vertical alignment without facing such difficulties? It shouldn't be this challenging to vertically align content...