lunedì 16 aprile 2012
Central alignment solution
(function ($) {
$.fn.ObjectAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah) / 2);
var aw = $(this).width();
var pw = $(this).parent().width();
if(Math.ceil(aw)>Math.ceil(pw)){
pw=aw;
$(this).parent().width(aw);
}
var mw = Math.ceil((pw-aw) / 2);
$(this).css('top', mh);
$(this).css('left', mw);
});
};
})(jQuery);
Questo è il plugin che mi ha salvata durante la spasmodica ricerca di una soluzione al mio problema: non si può centrare verticalmente un elemento TD che come attributo css "display:inline-block". (No, nemmeno vertical-align:middle!)
Questo attributo mi serviva perchè all'interno dei miei TD dovevo posizionare una immagine in alto a destra e quindi al td metto "position:relative" e all'immagine "position:absolute".
Per far questo, la proprietà "display:inline-block" è fondamentale, ma su Firefox non permette alcun tipo di allineamento verticale, nemmeno usando margin-top.
Quindi ho deciso di mettere al mio testo da centrare la proprietà "position:absolute" e ci pensa il plugin sopra a metterlo nella posizione giusta! Il plugin originale è qui, io l'ho adattato perchè faccia anche allineamento orizzontale e controllo dell'overflow del contenuto!
Wheeeew!
Iscriviti a:
Commenti sul post (Atom)
Nessun commento:
Posta un commento