Wyśrodkowanie elementu bez zdefiniowanej szerokości + poprawka dla IE
Skrypt wyśrodkowuje element UL o nazwie 'zawartosc' wewnątrz DIV'a z klasą 'pojemnik'. Kod posiada trzy wersje: dla nowych przeglądarek, alternatywne rozwiązanie oraz wersja dla IE6 i IE7.
Listing 1.0 pokazuje wyśrodkowanie tagu bez szerokości dla nowych przeglądarek. (Lisitng 1.1 zawiera alternatywną wersję)
Listing 2.0 to wyśrodkowanie tagu bez szerokości dla IE6 i IE7.
Przykłady są kombatybilne ze wszystkimi przeglądarkami.
Przykład użycia w HTML:
<div class="pojemnik">
<ul class="zawartosc">
<li>Funkcje.net</li>
</ul>
</div>
Listing
//Listing 1.0 - Wersja oficjalna dla wyśrodkowania
.pojemnik{
display:table;
margin:0 auto;
}
ul.zawartosc{
display:table-cell;
}
//Listing 1.1 - Alternatywna wersja działa w 100%
.pojemnik{
width:100%
}
ul.zawartosc{
display:table;
margin:0 auto
}
//Listing 2.0 - wersja dla IE 6, 7
.pojemnik {
display:block;
margin:0;
text-align:center;
}
ul.zawartosc{
display:inline;
zoom: 1;
}
.pojemnik{
display:table;
margin:0 auto;
}
ul.zawartosc{
display:table-cell;
}
//Listing 1.1 - Alternatywna wersja działa w 100%
.pojemnik{
width:100%
}
ul.zawartosc{
display:table;
margin:0 auto
}
//Listing 2.0 - wersja dla IE 6, 7
.pojemnik {
display:block;
margin:0;
text-align:center;
}
ul.zawartosc{
display:inline;
zoom: 1;
}
Dodano przez: divix
Ranga: Administrator serwisu Punktów: 0
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
:: 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