06-10-2012, 19:19
1) pozycjonowanie absolutne - prawie każdy lightbox z tego korzysta
2) http://www.brunildo.org/test/img_center.html - zastosowanie dodatkowego elementu dla wykorzystania vertical-align.
Vertical align NIE POZYCJONUJE w pionie. On pozycjonuje elementy WZGLEDEM SIEBIE. czyli jeżeli masz długi i krótki, to ten którki będzie pozycjonowany wzdlędem długiego. I to jest właśnie rozwiązanie twojego problemu. Tworzysz 1 element 100% height (ale żeby to zrobić musisz w necie poczytać o "CSS 100% layout") a drugi pozycjonujesz względem niego. W linku powyżej masz napisane jak to zrobić. Ogólnie:
Swoją drogą aż prosi się o zastowanie :before, :after ;]
Kod:
<body>
<div style="background:#efefef; width:400px; height:500px; margin:-200px -250px; position:absolute; top:50%; left:50%">
</div>
</body>2) http://www.brunildo.org/test/img_center.html - zastosowanie dodatkowego elementu dla wykorzystania vertical-align.
Vertical align NIE POZYCJONUJE w pionie. On pozycjonuje elementy WZGLEDEM SIEBIE. czyli jeżeli masz długi i krótki, to ten którki będzie pozycjonowany wzdlędem długiego. I to jest właśnie rozwiązanie twojego problemu. Tworzysz 1 element 100% height (ale żeby to zrobić musisz w necie poczytać o "CSS 100% layout") a drugi pozycjonujesz względem niego. W linku powyżej masz napisane jak to zrobić. Ogólnie:
Kod:
.container {text-align:center;}
.container > span {height:100%; width:0; display:inline-block;}
.container .element-wysrokowany {display:inline-block; vertical-align:middle;}
<div class="container">
<span></span>
<div class="element-wysrodkowany"></div>Swoją drogą aż prosi się o zastowanie :before, :after ;]
