Aliniere elemente HTML

postat acum 4 ani de Stefanescu Mihai in categorie CSS

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.


  • <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.

    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:

    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:

    float: right;
    width: 500px;
    background-color: orange;


Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!

Comentariu postate de retro jordans la data de 14.05.2019
I wanted to put you one little bit of word so as to thank you so much the moment again for all the magnificent things you've featured on this page. This has been certainly pretty generous with people like you to present easily what exactly most of us could have offered for an ebook in order to make some profit on their own, certainly since you could possibly have done it if you considered necessary. The inspiring ideas likewise served as the fantastic way to realize that some people have the same desire really like my own to know very much more with respect to this problem. I think there are several more fun instances up front for individuals who see your blog post.
Comentariu postate de minecraft for free la data de 15.05.2019
I like the valuable information you provide in your articles. I'll bookmark your blog and check once more here frequently. I am quite sure I will learn a lot of new stuff proper here! Good luck for the next!