Выравнивание по центру в CSS
Нередко верстальщику необходимо разместить элемент по центру страницы. На первый взгляд, эта задача простая, но на практике возможны сложности, которые можно исправить различными способами. Каждый из них имеет достоинства и недостатки. Предположим, необходимо разместить блок с картинкой в центре.
Отрицательный отступ
Применяем к блоку свойства top и left, которые выставляются на 50%. Для этого способа необходимо заранее знать размеры блока, половина от которого является значением отрицательного отступа.
Предположим, у нас есть HTML.
<div class="parent"> <div class="block"> <img src="test.jpg" alt=""/> </div> </div>
CSS в таком случае будет следующим.
.parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; } .block { width: 250px; /* Задаем ширину */ height: 250px; /* Задаем высоту */ position: absolute; top: 50%; /* Отступ сверху на половину родительского блока */ left: 50%; /* Отступ слева на половину родительского блока */ margin: -125px 0 0 -125px; /* Отступ на половину блока с помощью отрицательного margin */ img { max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; } }
Автоматический отступ
Этот способ напоминает предыдущий. Но здесь необходимо выставить атрибуты top, right, bottom и left на 0, а величину отступа выставить на auto. Огромное преимущество метода – наличие рабочих скроллбаров родительского элемента. Но недостаток способа такой же, как и у предыдущего – необходимость жестко задавать размеры блока.
Код выглядит следующим образом.
<style> .parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; } .block { width: 250px; height: 250px; position: absolute; /* Выставляем параметры top, right, bottom, left на 0, а margin – на auto */ top: 0; right: 0; bottom: 0; left: 0; margin: auto; img { max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; } } </style> <div class="parent"> <div class="block"> <img src="test.jpg" alt=""/> </div> </div>
Таблица
В этом коде необходимо выделить несколько элементов: родителя, ячейку родителя и блок. Первому необходимо задать табличное отображение, второй – ячейку таблицы, а блоку присвоить модель строчного блока.
Ячейке (элементу с классом inner) присваиваем параметры text-align: center и vertical-align: middle. Недостаток способа – не работают скроллбары, да и вообще эмуляция таблицы для выравнивания считается нехорошим тоном в кругу веб-разработчиков.
Пример кода с применением этого метода.
<style> .parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; } .block { width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img { max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; } } </style> <div class="parent"> <div class="inner"> <div class="block"> <img src="1450829233933958453855" alt=""/> </div> </div> </div>
Как выровнять текст по центру?
Чтобы выровнять текст по центру, необходимо присвоить ему свойство text-align со значением center.
Пример кода.
<style> p { text-align: center; /* Выравниваем текст по центру */ } </style> <p> Пример текста для демонстрации выравнивания по центру. </p>
Универсальный способ выравнивания по центру
Предположим, нам надо выровнять кнопку по центру в CSS. Для этого необходимо создать див, в центре которого размещается кнопка, которую мы собираемся ставить посередине, а потом воспользоваться типом отображения flex. Код будет приблизительно таким (описание в самом коде).
<style> .but { display: flex; /* Выставляем отображение родительского дива, как flex */ align-items: center; /* Выравнивание по вертикали */ justify-content: center; /* Выравнивание по горизонтали */ height: 100%; /* Высота родительского дива. Необходимо, чтобы кнопка выровнялась посередине от его высоты. Если убрать, кнопка будет размещаться вверху, а не по центру (по оси Y) */ } .but button { width: 400px; padding: 15px; } </style> <div class="but"> <button> Кнопка </button> </div>
Таким способом можно выравнивать абсолютно любые элементы на веб-странице: формы, текст, картинки, меню, заголовки вертикально и горизонтально. Логика универсальна: создается родительский див, в который необходимый элемент загружается в качестве дочернего. В родительском диве прописываются свойства display: flex, align-items: center, justify-content: center, height: 100%. В дочернем прописывается ширина, отступ и другие свойства.
Единственный недостаток способа – он поддерживается только самыми новыми версиями браузеров. Часть свойств можно реализовать через вендорные префиксы (например, -webkit–) для увеличения совместимости со старыми версиями.