Home > HTML > Make Text Vertical Align to Middle Using jQuery

<a><span>Short</span></a>

<a><span>Long Button</span></a>

<a><span>Long Long Button</span></a>

<style type="text/css">

a {display:block; width:100px; height:100px}

span {display:block}

</style>

<script type="text/javascript">

$(function() {

$('a').each(function() {

var $text = $(this).find('span');

var wrapper_height = $(this).height();

var text_height = $text.height();

var padding = 0;

if (text_height < wrapper_height) {

padding = (wrapper_height - text_height) / 2;

}

$text.css('padding-top', padding);

});

});

</script>



Flag Counter