Вирівнювання елементів в html

До сих пір ми з Вами вирівнювали елементи тільки по лівому краю. Точніше, ми з Вами взагалі цим не займалися, а сам браузер за замовчуванням вирівнює елементи по лівому краю. Зрозуміло, було б занадто нудно вирівнювати все по лівому краю. Тому існують різні способи вирівнювання по центру і по правому краю.

Вирівнювання елементів - це самі основи HTML, які просто необхідно знати при створення інтернет сайтів. Перше, що необхідно зробити - це набрати HTML-код найпростішої сторінки.

Відео: Курс HTML і CSS - Вирівнювання блоку div по центру на css [Урок 15]

Ще колись давно з`явився тег я зараз Вам не раджу його застосовувати, зважаючи на наявність більш сучасних способів, але не згадати я про нього не можу. Використовувати його дуже і дуже просто. Все, що Вам необхідно вирівняти по центру, Ви ставите всередині цього тега. Ось, наприклад, тут ми вирівнюємо заголовок 1-го рівня по центру.

Можна додати картинку, вирівняну також по центру, також давайте перейдемо на наступний рядок за допомогою тега :

  
 
 
src="Водяні ліліі.jpg"width="150"height="150"gt;

Це був тег, який вже застарів, до того ж, всупереч Вашим очікуванням тегів і просто не існує. Припустимо, по лівому краю вирівнюється за замовчуванням, по центру вирівнюється за допомогою тега, але як же бути з правим?

Відео: Вирівнювання тексту в HTML: HTML атрибут align і його значення justify, left, right, center

Щоб вирішити цю проблему розробники придумали універсальний спосіб вирівнювання елементів HTML. Спосіб полягає у використанні так званих контейнерів, які створюються за допомогою тега. Тобто все, що необхідно помістити в певний контейнер поміщається всередині тега. А вже у цього тега є атрибут "align", Значення якого і визначає положення даного контейнера. Бувають три значення:"left","center","right". За замовчуванням, варто"left", Втім, думаю, що Вас це не дивує.

Давайте зараз напишемо той же HTML-код, але з використанням контейнерів, до того ж, давайте вирівняти не по центру, а по правому краю.

align="Right"gt; 
 
 
src="Водяні ліліі.jpg"width="150"height="150"gt;

Як бачите, все працює. Раджу Вам також поміняти значення атрибута "align", Щоб подивитися на інші види вирівнювання вмісту контейнерів.

Інший спосіб вирівнювання елементів HTML - це таблиці, але ця тема заслуговує на окрему розмову, тому поговоримо про неї в одній з наступних статей.

А поки Ваша сторінка повинна виглядати так:

 
 
 
 
  
 
 
src="Водяні ліліі.jpg"width="150"height="150"gt; 
 
align="Right"gt; 
 
 
src="Водяні ліліі.jpg"width="150"height="150"gt;

З повагою, Михайло Русаков.

P.S. Якщо Ви хочете дізнатися більше по HTML, то подивіться мій безкоштовний курс з прикладом створення сайту на HTML: https://srs.myrusakov.ru/html

Поділися в соціальних мережах:

Схожі