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.
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>
<!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>
Dodano przez: divix
Ranga: Administrator serwisu Punktów: 0
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
-
-
Tre¶æ komentarza
-
:: Losowe artykuły
:: Wymiana linków
Modowe inspiracje |
Android Gry i Aplikacje |
ZaplanujTransport.pl: Przeprowadzki, transport, aukcje |
Logo dla firmy |
Change Tires - Car Weather Forecast Reminder |
Laminas: MVC Framework for PHP |
IT Books Reviews and Programming: JS, JAVA, PHP, ANDROID, CSS |
Katalog roślin |
Programming articles: JAVA, PHP, C++, Python, JavaScript |
Kancelaria Adwokacka Łukasz Huszno
