Як розташувати елемент у центрі за допомогою CSS

css

Інколи розташувати елемент на веб-сайті буває не так просто, як на перший погляд може здатися. Цей допис покликаний пояснити кілька особливостей, як це можна робити з різними елементами веб-сторінки. Складність ситуація пов’язана з тим, що різні елементи відцентровуються по-різному.

Ми розглянемо три випадки:

  1. Як розташувати текст у центрі
  2. Як розташувати блок у центрі
  3. Як розташувати зображення у центрі

Як розташувати текст у центрі

Це зробити найлегше. Просто треба застосувати властивість 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”]

This entire block is centered, but the text inside it is left aligned.

[/code]

Зауважте, що такий код буде працювати тільки за умови встановлення ширини. Без цього елемент центруватись не буде.

Як розташувати зображення у центрі

Тут треба так само застосувати margin-left та margin-right зі значенням auto і вказати, що це блочний елементи за допомогою display:block. Код буде такий:

[code lang=”HTML”]

[/code]

Учасник конкурсу(maque.org.ua скоро 3 роки)


Як і завжди, будемо раді відповісти на Ваші запитання, вислухати Вашу критику, зауваження та поради.

Якщо вміст цієї статті Вам видається корисним та цікавим, поділіться посиланням на нього через Твіттер, Фейсбук, Google + чи Vkotakte.

Дуже дякую,
адмін (Колос Віталій)


Купить авто раніше чи пізніше хочеться усім, адже свій засіб пересування дає відчуття свободи, а це повинен цінувати кожен чоловік.

You may also like

2 коментарі

  1. Я би рекомендував розписувати не тільки горизонтальне центрування, а й вертикальне. воно набагато важче реалізовується