У цій статті ми торкнемося питання вирівнювання по центру різних елементів html за допомогою css властивостей.
Досить часто виникає потреба вирівняти div по центру або вирівняти його вміст. Існує кілька способів це зробити. Деякі способи підходять для вирівнювання тексту, картинок і іншого, але не підходять для вирівнювання блоків.
Для початку розглянемо варіанти для вирівнювання вмісту блоків, таке як зображення, текст. Цей метод підходить майже до всіх елементів.
У цьому випадку все просто - для батьківського елемента задаємо властивість text-align із значенням center. Такий спосіб вирівняти текст по центру за допомогою css самий простий і зручний. Для більш глибокого розуміння наведу приклад. Важливо усвідомлювати, що в цьому випадку по центру у нас вирівнюється тільки вміст.
HTML-код:
<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Сторінка </ title> <link rel = "stylesheet" href = "/../ css / template.css "type =" text / css "/> </ head> <body> <p> Якийсь текст, вирівняний по центру для батьківського елемента body </ p> <img src =" / images / 1 386 .jpg "alt =" Посмішка "/> </ body> </ html>
CSS-код:
body {text-align: center;} / * вирівнюємо вміст body по центру * /
З найпростішим - вирівнюванням тексту і зображень за допомогою css по центру сторінки ми розібралися.
Тепер перейдемо до способів вирівнювання елементів на кшталт блочного типу (div, table). У цьому випадку ми будемо вирівнювати по центру не вміст, а самі таблиці, блоки, абзаци.
Всього я пропоную два варіанти за допомогою CSS: використовуючи властивість margin і використовуючи властивості position c left. Важливо зауважити, що жоден з цих способів не буде працювати, якщо у вас не задана фіксована ширина елемента, не важливо в px,% або чим ще.
Таким чином, в першу чергу вирішуємо, в яких одиницях і яка буде ширина елемента, який ми хочемо вирівняти по центру.
Вирівнювання по центру за допомогою margin
Для методу за допомогою margin байдуже, в процентах або пікселях ви задає цю ширину. Для центрування за цим методом, вам потрібно в якості значень властивості margin поставити наступні 0 auto. Якщо конкретніше, то для бічних відступів значення має бути auto, а для верхнього і нижнього можна задавати будь-які зовнішні відступи. Тобто розгорнутий варіант значення виглядає так 0 auto 0 auto, або так 10px auto 5% auto.
Таким чином виставляти зовнішні відступи для верху і низу елемента можна, а бічні обов'язково повинні стояти в auto.
Це, мабуть, найбільш універсальний і зручний спосіб, щоб div був вирівняний по центру або будь-який інший елемент.
Далі наводиться приклад вирівнювання за допомогою цього методу.
HTML-код:
<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Сторінка </ title> <link rel = "stylesheet" href = "/../ css / template.css "type =" text / css "/> </ head> <body> <div class =" centr "> з іншого боку початок повсякденної роботи по формуванню позиції забезпечує широкому колу (фахівців) участь у формуванні відповідний умов активізації. Повсякденна практика показує, що зміцнення та розвиток структури дозволяє оцінити значення відповідний умов активізації. Не слід, однак забувати, що реалізація намічених планових завдань відіграє важливу роль у формуванні істотних фінансових і адміністративних умов. Різноманітний і багатий досвід рамки і місце навчання кадрів відіграє важливу роль у формуванні систем масової участі. </ Div> <div class = "centrall"> З іншого боку початок повсякденної роботи по формуванню позиції забезпечує широкому колу (фахівців) участь у формуванні відповідний умов активізації. Повсякденна практика показує, що зміцнення та розвиток структури дозволяє оцінити значення відповідний умов активізації. Не слід, однак забувати, що реалізація намічених планових завдань відіграє важливу роль у формуванні істотних фінансових і адміністративних умов. Різноманітний і багатий досвід рамки і місце навчання кадрів відіграє важливу роль у формуванні систем масової участі. </ Div> </ body> </ html>
CSS-код:
body {text-align: center;} div {padding: 10px; color: #FFFFFF;} div.centr {background: # 003300; width: 300px; / * Фіксована ширина через пікселі * / margin: 10px auto 0 auto; / * Зовнішні відступи, вирівнюють блок по центру і відступаючи зверху на 10 px * /} div.centrall {background: # 990000; width: 30%; / * Фіксована ширина через відсотки * / margin: 2% auto 0 auto; / * Зовнішні відступи, вирівнюють блок по центру і відступаючи зверху на 2% * / text-align: center; }
Вирівнювання по центру за допомогою position і left
Такий варіант підійде не для будь-якого елемента.
По-перше, ширину потрібно вказувати тільки в процентах, з пікселями таке не буде працювати. Скоро ви зрозумієте, чому так.
По-друге, батьківського тегом повинно бути задано властивість position з значенням relative / absolute / fixed, будь-яким з перерахованих.
Тепер потрібно так само задати будь-яке з цих значень властивості position для вирівнюється елемента. Потім взяти 100 відняти ширину цього елемента і поділити число, на 2. Вийшло значення і буде тим, яке потрібно вказати для left (варто зазначити, що це властивість можна замінити на right, як зазвичай це не суттєво). Завдяки таким властивостям потрібний div або таблиця будуть розміщені по центру батьківського елемента.
Як це робота? Властивість position тут потрібно, щоб властивість left відраховується від лівої межі батьківського елемента не екрану, хоча іноді підходить варіант з відсутністю заданого властивості position для батьків. Після чого ми просто задаємо таке значення властивості left, щоб ліва межа розміщувалася на половині ширини від всієї ширини батьківського елементу за вирахуванням ширини самого блоку.
Подивіться самі, як це працює.
HTML-код:
<! DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Сторінка </ title> <link rel = "stylesheet" href = "/../ css / template.css "type =" text / css "/> </ head> <body> <div class =" centrall "> з іншого боку початок повсякденної роботи по формуванню позиції забезпечує широкому колу (фахівців) участь у формуванні відповідний умов активізації. Повсякденна практика показує, що зміцнення та розвиток структури дозволяє оцінити значення відповідний умов активізації. Не слід, однак забувати, що реалізація намічених планових завдань відіграє важливу роль у формуванні істотних фінансових і адміністративних умов. Різноманітний і багатий досвід рамки і місце навчання кадрів відіграє важливу роль у формуванні систем масової участі. </ Div> </ body> </ html>
CSS-код:
body {position: relative;} div {padding: 10px; color: #FFFFFF; position: relative;} div.centrall {background: # 990000; width: 20%; / * Фіксована ширина через відсотки * / text-align: center; left: 40%; / * Відступ від лівого краю батьківського елементу * /}
