Подравняване на Block елементи

Един блок елемент е елемент, който заема цялата ширина на разположение, и има нов ред преди и след него. Примери за блокови елементи:

• <h1>
• <p>
• <div>

За подравняване на текст, вижте CSS Текст глава. В тази глава ще ви покажем как да подравним блокови елементи, за да може страничката ни да изглежда по-добре.

Подравняване в центъра с margin

Блок елементите могат да се подравнят в средата, ако зададем стойност на левия и десния margin да бъде auto. Забележка: Auto стойността на маргина няма да работи в IE8 или по-ранни версии, освен ако DOCTYPE! не е обявена. Когато направим тази дефиниция, казваме, че левия и десния margin трябва да имат еднаква големина. Резултата е центриран елемент:

Съвет: Този метод няма да проработи ако елемента има ширина 100%.

Ляво и дясно подравняване чрез position пропъртито

Един метод за изравняване на елементи е да се използва абсолютно позициониране:

Забележка: Абсолютно подравнените елементи, не участват в потока от елементи и ще се застъпят с останалите.

Crossbrowser проблеми със съвместимостта

При центриране на елементи е добре да се определи margin и padding за body елемента. По този начин избягваме визуални разлики в различните браузъри. Има проблем с IE8 и по-ранните, когато се използва пропъртито position. Ако даден елемент контейнер (в нашия случай <div class=“container“>) има определена ширина, и декларацията на DOCTYPE! Липсва, IE8 и по-ранни версии ще добавят margin 17px от дясната страна. Това е мястото, запазено за скролер. Винаги слагайте декларация DOCTYPE, за да избягвате такива неточности:

Ляво и дясно подравняване използвайки float

Като метод за подравняване на елементи можем да използваме float свойството: