Ez egy Kecs.es blog webfejlesztési ötletek, tanácsok, észrevételek

Az a fránya vertical-align az őrületbe kerget!!!

Tegnap szerettem volna egy szép megoldást találni arra a problémára, hogy van egy div, amibe szöveget fogok írni. A div mérete adott (35px magas és 200px széles). A probléma az, hogy a beleírt tartalmat szeretném mindenhogy középre igazítani. vízszintesen nincs is semmi gond. Ott van a text-align: center... De mi van ha függőlegesen szeretnénk valamit középre (szabbvány szerint: middle) igazítani? Hát azt értelmesen nem lehet...

Ugyanis valakinek az a nagyon okos ötlete támadt, hogy a vertical-align csak inline elemkre lehessen használni. Így egy blokk elemmel meg vagy lőve. Léteznek különböző css hack-ek, mint pl.: line-heigh értékét beállítjuk akkorára mint amekkora az őt tartalmazó div, de ez használhatatlan azonnal ha több sort kell beleírni. Vagy ott van a játék a display tulajdonsággal, hogy 3 divet használunk, és akkor kívülről befelé a display tulajdonságot table-re, table-row-ra, és végül table-cel-re állítjuk. De ez megint nem megy IE6 alatt... Szóval nem lesz böngészőfüggetlen...

Ha valaki olyan mint én, miszerint tableless megszállott, akkor nem szívesen használ table-t... de sajnos nincs más választásunk... ott van egyedül normálisan valign='middle' megoldva...

VAGY:
jQuery őrült is egyben mint én, és megoldja azzal. Igen tudom ez sem a legjobb megoldás, mert akinek nincs JAVAja... Az kapja be :D

JavaScript kód:

(function ($) {
  $.fn.vAlign = function(container){
    return this.each(function(i){
      if(container == null) {
        container = 'div';
      }
      //írd át ha kell (Ez az extra magassága a szülő objektumnak)
      var paddingPx = 10;
      $(this).html("<" + container + ">" + $(this).html() + "</" + container + ">");
      var el = $(this).children(container + ":first");
      //az új elem magassága
      var elh = $(el).height();
      //a szülő elem magassága
      var ph = $(this).height();
      if(elh > ph) {
        //Ha az új elem magasabb mint a szülő akkor átméretezi
        $(this).height(elh + paddingPx);
        ph = elh + paddingPx;
      }
      var nh = (ph - elh) / 2; 
      //Új margint beállítja
      $(el).css('margin-top', nh);
    });
  };
})(jQuery);

És a használata:

$(document).ready(function(){
  $("p.special").vAlign();
  //A diven belűl létrehoz egy p elemet
  $("div.info").vAlign("p");
  //A diven belűl létrehoz egy span elemet
  $("p.warn").vAlign("span");
  //És használható további fv is utána :)
  $("p.warn").vAlign().css("color","red");
});

Forrás oldal: http://cool-javascripts.com/
Demó oldal: http://demos.cool-javascripts.com/