CSS poziomo wyrównywania (Align Horizontal)
CSS, istnieje kilka właściwości poziomego elementu wyrównania.
Dopasuj elementy blokowe
Blok elementem jest elementem, zajmując całą szerokość przedniej i tylnej są podziały wiersza.
Przykłady elementów blokowych:
- <H1>
- <P>
- <Div>
Wyrównanie tekstu, zobacz tekst CSS sekcję. ,
W tym rozdziale pokażemy, jak zablokować poziome wyrównanie elementów układu.
Centrum wyrównany, wykorzystując właściwości margin
Elementy blokowe można lewy i prawy margines ustawiony na "Auto" wyrównania.
Uwaga: Za pomocą marży IE8: Własność auto nie działa, chyba deklarowanej DOCTYPE!
Właściwości marginesu można dowolnie podzielić na lewy i prawy ustawienia marginesów są automatycznie przypisywane, wynikiem jest pojawienie się elementu środkowego:
Przykłady
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
Spróbuj »
Wskazówka: Jeśli szerokość wynosi 100%, wyrównanie nie jest skuteczne.
Uwaga: IE5 istnieje margines w elemencie BUG bloku przetwarzania.Aby powyższy przykład pracy w IE5, musimy dodać trochę dodatkowego kodu. Przykłady
Korzystanie z właściwości position jest ustawiony na lewo, w prawo wyrównany
Jeden element wyrównywania jest użycie pozycjonowanie bezwzględne:
Uwaga: Pozycjonowanie bezwzględne nie ma nic wspólnego z prądem dokumentu, dzięki czemu mogą one obejmować inne elementy na stronie.
Crossbrowser Zagadnienia kompatybilności
<P align podobne, jeżeli takie elementy, z góry określony margines i elementem wypełniania jest zawsze dobrym pomysłem. Ma to na celu uniknięcie wizualnych różnic w różnych przeglądarkach.IE8, a wcześniej miał problemy podczas korzystania z właściwości position. Jeśli element kontenera (w tym przypadku <div class = "container">) określona szerokość ,! deklaracji DOCTYPE brakuje, IE8 i wcześniejsze wersje doda margines 17px po prawej stronie. To wydaje się być toczenia przestrzeń rezerwy. Podczas korzystania z właściwości position jest zawsze ustawiony w deklaracji DOCTYPE!
Przykłady
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
Spróbuj »
Korzystanie Własność float do lewej, prawej wyrównane
Wykorzystując tę właściwość, pływak jest metody elementów wyrównania:
Crossbrowser Zagadnienia kompatybilności
Elementy wyrównane jak ten, wstępnie określona marża i wypełnienie elementem jest zawsze dobrym pomysłem. Ma to na celu uniknięcie wizualnych różnic w różnych przeglądarkach.
IE8, a wcześniej miał problem przy użyciu właściwości pływaka. Jeśli element kontenera (w tym przypadku <div class = "container">) określona szerokość ,! deklaracji DOCTYPE brakuje, IE8 i wcześniejsze wersje doda margines 17px po prawej stronie. To wydaje się być toczenia przestrzeń rezerwy. Podczas korzystania z własności pływaka jest zawsze ustawiony w deklaracji DOCTYPE!
Przykłady
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
Spróbuj »