Najnowsze tutoriale tworzenie stron internetowych
 

CSS Układ - Align Horizontal


CSS kilka właściwości mogą być wykorzystane do wyrównania elementów w pozycji poziomej.


Align Center - Korzystanie margin

Ustawianie szerokości elementu blokowego będzie uniemożliwić wyciągając do krawędzi jego kontenera. Użyj margin: auto; do poziomo wyśrodkować element na jego opakowaniu.

Element będzie trwać określonej szerokości, a pozostałe miejsca zostaną podzielone równo między dwie marże:

Przykład

.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
Spróbuj sam "

Wskazówka: Centrum Wyrównywanie nie ma wpływu, jeśli width właściwość nie jest ustawiona (lub ustawiony na 100%).

Wskazówka: Aby uzyskać wyrównanie tekstu można znaleźć w CSS Text rozdział.


Lewe i prawe Align - Korzystanie position

Jedną z metod do ustawiania elementów jest użycie position: absolute; :

Przykład

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
Spróbuj sam "

Uwaga: bezwzględne umieszczone elementy usunięte z normalnego przepływu i mogą zachodzić na siebie elementy.

Wskazówka: Podczas wyrównywania elementów w position , zawsze definiować margin i padding dla <body> elementu. Ma to na celu uniknięcie wizualnych różnic w różnych przeglądarkach.

Jest też problem z IE8, a wcześniej, przy użyciu position . Jeśli element kontenera (w naszym przypadku <div class="container"> ) ma określoną szerokość i !DOCTYPE Deklaracji brakuje, IE8 i wcześniejsze wersje doda 17px margin po prawej stronie. Wydaje się to być miejsce zarezerwowane dla paska przewijania. Tak, zawsze ustawić !DOCTYPE Deklarację podczas korzystania position :

Przykład

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
Spróbuj sam "

Lewe i prawe Align - Korzystanie float

Innym sposobem wyrównania elementów jest zastosowanie float właściwość:

Przykład

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
Spróbuj sam "

Wskazówka: Podczas wyrównywania elementów z float , zawsze definiować margin i padding dla <body> elementu. Ma to na celu uniknięcie wizualnych różnic w różnych przeglądarkach.

Jest też problem z IE8, a wcześniej, przy użyciu float . Jeśli !DOCTYPE Deklaracji brakuje, IE8 i wcześniejsze wersje doda 17px margin po prawej stronie. Wydaje się to być miejsce zarezerwowane dla paska przewijania. Tak, zawsze ustawić !DOCTYPE Deklaracji przy użyciu float :

Przykład

body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}
Spróbuj sam "

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2»