Loading:

Zaplanuj Przeprowadzke - Ściągnij Darmową Aplikację na Androida

Vertical-align: Pionowe wyśrodkowanie tekstu lub elementu + działa w IE

Skrypt wyświetla tekst lub/i element DIV, który będzie wyświetlony w samym środku danego pojemnika. Wyrównanie dotyczy osi pionowej.

 

Przykładz z listingu 1.0 ukazuje wersję wyśrodkowania dla przeglądarek: FF, Opera, Chrome, Safari IE8 (na przykłądzie DIV'a)

 

Kod na listingu 2.0 pokazuje jak wyśrodkować DIV wewnątrz innego DIV'a dla wymienionych wyżej przeglądarek z listingu 1.0 oraz dla IE6 oraz IE7.



Napisz Artykuł

Listing

<!-- Listing 1.0: kompatybilny dla nowych przeglądarek -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Wyśrodkowanie pionowe</title>
  <style>
    .pojemnik {border: 1px solid green;} /* tylko dla widoczności obramowania */
  </style>
</head>

<body>
  <div class="pojemnik" style="display: table; height: 400px; overflow: hidden;">
    <div style="display: table-cell; vertical-align: middle;">
      <div class="pojemnik">
        Funkcje.net<br>
        Funkcje.net<br>
        Funkcje.net, Funkcje.net, Funkcje.net, Funkcje.net<br>
        Funkcje.net, Funkcje.net, Funkcje.net
      </div>
    </div>
  </div>
</body>
</html>



<!-- Listing 2.0: kompatybilny dla nowych oraz starych przeglądarek -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Wyśrodkowanie pionowe</title>
  <style>
    .pojemnik {border: 1px solid green;} /* tylko dla widoczności obramowania */
  </style>
</head>

<body>
  <div class="pojemnik" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="pojemnik" style=" #position: relative; #top: -50%">
        Funkcje.net<br>
        Funkcje.net<br>
        Funkcje.net, Funkcje.net, Funkcje.net, Funkcje.net<br>
        Funkcje.net, Funkcje.net, Funkcje.net
      </div>
    </div>
  </div>
</body>
</html>


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=5086

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: divix
Ranga: Administrator serwisu Punktów: 37169
Komentarze użytkowników
    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors