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! 

Nessun commento:

Posta un commento