Aliniere elemente HTML

Alinierea elementelor de tip Block

Un element de tip block este acel tip de element ce ocupa toata latimea valabila si are un line break inainte si dupa el.

Exemple:

<h1>
<p>
<div>

Alinierea pe centru folosind margin

Elementele de tip block pot fi aliniate pe centrul paginii setand margin pe auto.Atentie: margin:auto nu functioneaza in IE8 decat daca este declarat un !DOCTYPESetand marginile stanga/dreapta pe auto specificati browserului ca de fapt ar trebuii sa imparta spatiul valabil in 2 margini egale.

.elementCentrat{
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    background-color: red;
}

Aliniere stanga/dreapta folosind position

Acum am sa va prezint o metoda de a folosi position pentru aliniere stanga sau dreapta:

.aliniere_dreapta{
    position: absolute;
    right: 0px;
    width: 500px;
    background-color: green;
}

Compatibilitate BrowsereCand aliniem elementele in acest fel este recomandat sa predefinim margi si padding pentru elmentul <body> pentru a evita diferentele vizuale in diferite browsere.

Totusi exista o problema cu IE8 si versiunile anterioare la folosirea proprietatii position. Daca un container (ex: un <div>) are o latime specificata si lipseste !DOCTYPE-ul documentului browserul va adauga un margin de 17px in partea dreapta.

Va recomand sa ii dati un margin de 0px si un padding de 0px bodey-ului:

body {
    margin: 0px;
    padding: 0px;
}

Aliniere stanga/dreapta folosind float

Mai putem alinia un element HTML folosind si float-ul:

.aliniereDreapta{
    float: right;
    width: 500px;
    background-color: orange;
}

Despre CHIFOR CORNEL IULIAN

SALUT!MA NUMESC CHIFOR CORNEL IULIAN,SUNT NASCUT PE DATA DE 06.11.2001 SI IMI PLACE ENORM DOMENIILE IT SI MECANICA AUTO!DA STIU CA ACESTE DOMENII NU SE ASEAMANA DELOC DAR EU FAC DOAR CEEA CE IMI PLACE!TOCMAI DE ACEEA AM HOTARAT SA IMI FAC UN WEBSITE!DAR CA TOTI FONDATORII DE WEBSITEURI AS AVEA NEVOIE SI DE UN AJUTOR CARE SA MAI POSTEZE SI EL MACAR 2 ARTICOLE PE WEBSITE PENTRU A ECHILIBRA POSTARILE WEBSITEULUI SI A MARII NUMARUL DE VIZITATORI!ASA CA DACA TU CREZI CA ESTI CEL POTRIVIT SI AI DORII SA ITI FACI MACAR 1 ORA LIBERA PE ZI LA CALCULATOR EU TI-AS FI RECUNOSCATOR SI AM SA ITI FAC SI TIE UN WEBSITE CUM DORESTI TU!

Vezi toate articolele lui CHIFOR CORNEL IULIAN →