Інколи розташувати елемент на веб-сайті буває не так просто, як на перший погляд може здатися. Цей допис покликаний пояснити кілька особливостей, як це можна робити з різними елементами веб-сторінки. Складність ситуація пов’язана з тим, що різні елементи відцентровуються по-різному.
Ми розглянемо три випадки:
- Як розташувати текст у центрі
- Як розташувати блок у центрі
- Як розташувати зображення у центрі
Як розташувати текст у центрі
Це зробити найлегше. Просто треба застосувати властивість text-align зі значенням center. Тобто ось так:
[code lang=”HTML”]
This is an example of a DIV block that has been centered. I put a border around the div so that you can see it. The text inside this div should not be centered in the div, but the div itself should be centered.
[/code]
Зауважте, що текст буде центруватись відносно батьківського елемента
Як розташувати блок у центрі
Аби розмістити блочний елемент, наприклад div, у центрі, потрібно встановити ширину цього елемента (width:200px) і застосувати margin-left та margin-right зі значенням auto:
[code lang=”HTML”]
[/code]
Зауважте, що такий код буде працювати тільки за умови встановлення ширини. Без цього елемент центруватись не буде.
Як розташувати зображення у центрі
Тут треба так само застосувати margin-left та margin-right зі значенням auto і вказати, що це блочний елементи за допомогою display:block. Код буде такий:
[code lang=”HTML”]
[/code]
Як і завжди, будемо раді відповісти на Ваші запитання, вислухати Вашу критику, зауваження та поради.
Якщо вміст цієї статті Вам видається корисним та цікавим, поділіться посиланням на нього через Твіттер, Фейсбук, Google + чи Vkotakte.
Дуже дякую,
адмін (Колос Віталій)
Купить авто раніше чи пізніше хочеться усім, адже свій засіб пересування дає відчуття свободи, а це повинен цінувати кожен чоловік.
