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 "