Як розташувати елемент по центру за допомогою css
Привіт шановні Новомосковсктелі блогу mainview.ru. Думаю, кожен зараз розуміє, що створити сучасний сайт не так-то просто. Потрібно не тільки володіти хорошими знаннями, а й мати хороший досвід. Часто при розробці веб-сайту, можна зіткнутися з рядом проблем, які потребують часу для знаходження рішення, які зажадають час на пошук і тестування можливих рішень. Саме тому я вирішив торкнутися деяких "маленьких великих проблем", з якими веб розробники стикаються постійно. Сьогодні хочу поговорити про те, як правильно розташувати елементи всередині контейнера по центру.
Проблема. Як розташувати елементи по центру за допомогою CSS
Ви хочете розташувати елемент по центру, щодо його батьківського елементу. Щоб всередині контейнера елемент розташовувався посередині. Для цього браузер повинен виставити рівну ширину полів справа і зліва при зазначеної ширині самого елемента:
Рішення. Вирівнюємо елементи по центру за допомогою CSS
Щоб розташувати елемент по центру, вкажіть ширину елемента, а потім використовуйте значення "Auto" для обох полів (лівого і правого):
Або можете записати правила в скороченому вигляді, для того, щоб вирівняти елемент по центру контейнера:
ПОДИВИМОСЯ НА ЗНАЧЕННЯ "AUTO" ДЕТАЛЬНІШЕ
CSS містять 7 унікальних властивостей, які застосовується для установки горизонтального формату елемента margin-left. border-left. padding-left. width. padding-right. border-right. margin-right. Їх сума становить загальне горизонтальне простір, яке елемент займає на даній сторінці. З семи властивостей, три можуть приймати як регулярні значення (у відсотках, пікселях, точках і т.д.), так і значення "Auto". Це ширина елемента (width). ліва межа (margin-left) і права межа (margin-right).
Виходячи з цього, ми можемо отримати чотири можливих комбінації, які будуть виглядати так:
- Два властивості зі значенням «Auto», одна властивість з фіксованим значенням.
- Одне властивість із значенням «Auto», два інших властивості з фіксованим значенням.
- Всі три властивості мають фіксовані значення.
- Всі три властивості зі значенням «Auto».
1. ОДНЕ ВЛАСТИВІСТЬ зі значенням «AUTO», ІНШЕ З фіксованих значень.
Цей варіант представляє найбільший інтерес. При установці обох полів в автоматичне значення, а ширини елемента в фіксоване значення, браузер буде призначати полях рівну ширину. Тим самим елемент буде розташований по центру щодо батьківського контейнера. наприклад:
Також в цій комбінації можливий, як ви зрозуміли, і інший варіант. Припустимо, що одне поле має фіксовану довжину, а інше поле встановлено в значення «auto». Ширина елемента також встановлена значення «auto». У цьому випадку ширина поля, встановленого в значення «auto» буде встановлена в нуль, а максимально можливий простір буде встановлено для ширини самого елемента. Це необхідно враховувати для цього варіанта. наприклад:
виглядати це буде ось так:
2. ОДНЕ ВЛАСТИВІСТЬ зі значенням «AUTO», ІНШЕ З фіксованих значень.
В цьому випадку браузер автоматично встановлює ширину властивості зі значенням «auto», щоб витримати інші два заданих значення. Наприклад, якщо ширина елемента встановлена в 960px, а ліве поле в 200px, браузер автоматично розрахує ширину правого поля.
За замовчуванням всі браузери встановлюють значення полів в «auto». Ви можете прибрати рядок margin-right: auto ;. і ви отримаєте той же результат.
3. ВСЕ ТРИ властивості мають фіксований ЗНАЧЕННЯ.
В цьому випадку, браузери будуть змушені встановити праве поле (margin-right) в автоматичному значення. А це повертає нас до попереднього випадку:
4. ВСЕ ТРИ властивості зі значеннями «AUTO».
В цьому випадку браузери буде призначити елементу максимальну довжину. Тобто як праве так і ліве поля будуть обнулені.
ДОПОВНЕННЯ: Я ЗАСТОСУВАВ ЦЕЙ МЕТОД ДЛЯ ЗОБРАЖЕННЯ, АЛЕ ЦЕ НЕ ПРАЦЮЄ, ЧОМУ?
Автоматичні поля можуть бути використані тільки для блокових елементів: таких як параграфи. "DIV", і списки, які займають всю рядок, тим самим не дозволяючи додавати простір з боку полів. Зображення, "span", "em", "strong", також відомі як лінійні елементи: елементи, які не створюють блок самостійно, вони повинні бути включені в блок елементів. Так як вони вважаються частинами тексту, "бічні" поля лінійних елементів просто ігноруються веб-браузерами. Тому, для того, щоб відцентрувати зображення, ми повинні встановити властивість "display" зі значенням "block", так як це показано нижче.
Кращий спосіб заробити в мережі, це працювати на Kwork.
KWORK надійний спосіб заробити, виконуючи завдання за 500 р.
- Admitad - заробіток на партнерських програмах
- 7offers - заробіток на партнерських програмах
- etxt - заробіток на продажу та купівлі текстів
- TravelPayouts - заробіток на продажу авіаквитків
- Вктаргет - заробіток в Контакте, Facebook, Instagram, Youtube, Twitter
- BestChange - моніторинг обмінників, де платять по $ 0.35 за кожного клієнта
Читаючи цей сайт Ви даєте свою згоду на використання файлів Cookie. В іншому випадку покиньте цей сайт. погоджуюся