Garth

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
Při této konstrukci pak není nutné přepisovat daný skript a stačí pouze doplnit třídu "stred_blok_na_vysku_jquery" k bloku jaký chceme středit na výšku.

<< zpět




Nejnovější články

Jak udělat stín bloku pouze na jedné straně?

CSS - Úvod do CSS

Jak detekovat klik na tlačítka myšy?

JavaScript - Úvod do JavaScriptu

Jak udělat odkaz na celý řádek tabulky?

JavaScript - Příklady v JavaScriptu

Jak zrušit tečky kolem odkazu?

CSS - Základy CSS

Jak fungují lomítka a tečky v url adrese?

(x) HTML - Úvod do HTML