Latest web development tutorials

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

.center
{
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:

Przykłady

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Spróbuj »

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

body
{
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:

Przykłady

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Spróbuj »


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

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Spróbuj »