Jak středit vertikálně blok s nepevnou výškou?

Středit text či obrázek vertikálně není složité a je na to mnoho postupů. Ať již "line-height", "vertival-align", či třeba pomocí absolutní pozice. Pokud, ale středíme celý blok tak nám výše zmíněné postupy nepomohou. Absolutní pozicování skončí u situace, kdy nemůžeme určit jak vysoký bude středěný blok.

Jediná cesta je použít krátký jQuery skript.

//jQuery cast
//------------------
(function ($) {
// samotna funkce na stredeni
$.fn.vAlign = function() {
return this.each(function(i){
//var ah = $(this).height();
var ah = $(this).outerHeight();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah) / 2);
//$(this).css('margin-top', mh);
$(this).css('top', mh);
});
};
})(jQuery);

//po window load je jistota, ze se vse donacetlo a skript pocita realne 
hodnoty
$( window ).load(function() {
  $('.stred_blok_na_vysku_jquery').vAlign();
});

//CSS cast
//------------------
.otec{
position: relative;
display: block;
height: 400px;
}
.obsahova_cast{
position: absolute;
right: 0px;
/*top dopocita jQuery*/
width: 50px;
/*height nezname - napriklad pagination u posuvniku (= ty ovladaci tecky kde jejich pocet se meni s tim kolik je stranek v posuvniku)*/
padding: 10px 10px 10px 10px;
background-color: yellowgreen;
}

//HTML cast
//------------------

jakykoliv obsah

<< zpět