Vertical align CSS — выравнивание по вертикали в помощью CSS
Вертикальное выравнивание CSS — не самая простая задача. Осложняет дело и то, что с сегодняшними требованиями к адаптивному дизайну для разных устройств разработчикам приходится создавать элементы с « гибкой » высотой, и вычисление центра по вертикали становится довольно хитрой задачей.
В данной статье мы рассмотрим:
- свойство vertical-align , как и когда оно работает;
- метод центрирования по вертикали элемента с известной высотой;
- центрирование по вертикали элементов с изменяемой высотой.
Vertical-align CSS
Свойство vertical-align влияет только на элементы, у которых свойство display имеет значения inline , inline-block или table-cell . Оно принимает в качестве значений число, проценты или ключевое слово.
Длина и проценты выравнивают базовую линию элемента на соответствующем расстоянии от базовой линии родительского элемента.
Ключевые значения vertical-align могут быть следующими:
- baseline;
- sub;
- super;
- text-top;
- text-bottom;
- middle;
- top;
- bottom.
Большинство из них не требует дополнительного объяснения. Стоит отметить только sub и super , которые отображают элемент как подстрочный и надстрочный, не изменяя при этом размер шрифта.
Рассмотрим наглядный пример вертикального выравнивания текста CSS с помощью vertical-align . У нас есть сетка с изображениями и текстом — все они разной высоты, поэтому не везде текст выравнивается красиво:
grilled bacon
tasty bacon
crispy bacon
bacon
Чтобы всё аккуратно выровнять, можно задать контейнерам сетки свойство display: inline-block и использовать для изображений свойство vertical-align: bottom . Если бы в нашем примере не было текста, можно было бы использовать vertical-align: middle и легко добиться нужного результата.
Центрирование по вертикали
В примере, приведенном ниже, у нас есть div с чёрным фоном и рамкой. Внутри него находится блок поменьше с нужной нам шириной и высотой:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis aperiam quidem minima a qui ipsa deleniti nisi modi nesciunt dolores, consequatur dolorem, dignissimos debitis distinctio. Voluptas eligendi fuga voluptatem eos.
Если мы знаем высоту блока, можно использовать абсолютное позиционирование, чтобы осуществить CSS вертикальное выравнивание по центру .
Применив к контейнеру свойство position: relative , можно задать абсолютное позиционирование внутреннему блоку. Если присвоить свойствам top и left значение 50%, блок сдвинется на 50% от верхнего и левого краёв. Верхний левый угол блока окажется точно в центре контейнера:
.container < position: relative; background: #444; >.box
Наш блок имеет заданные ширину и высоту, поэтому можно установить для него отрицательные отступы — на половину высоты вверх и половину ширины влево. Наш блок теперь размещён в центре контейнера.
Этот приём CSS вертикального выравнивания блока работает, но его недостаток заключается в неизменяемой ширине элементов. Поэтому он будет далеко не лучшим решением для работы над адаптивным дизайном.
Адаптивное центрирование по вертикали
Fluid vertical center
Отличные результаты для центрирования по вертикали элементов с изменяемой высотой можно получить, объединив vertical-align: middle с псевдоэлементами. Возьмём тот же пример с блоком внутри контейнера, но в этот раз блок будет иметь изменяемую высоту.
Главный приём здесь — создать невидимый элемент ( используя псевдоэлемент ), который будет заполнять контейнер по высоте, и установить свойства display: inline-block и vertical-align:middle . После этого нужно выровнять внутренний блок, также установив ему свойства display: inline-block и vertical-align: center . Затем центрировать блок по горизонтали, используя text-align: center :
.container < height: 400px; margin: 20px; background: #444; font-size: 0; text-align: center; >.container:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.box
Теперь, когда изменяется ширина контейнера, также изменяется ширина дочернего блока в процентах, соответственно меняя его высоту. Но при этом к блоку применяется вертикальное выравнивание CSS div .
МК Михаил Кузнецов автор-переводчик статьи «
Как выровнять кнопку по вертикали css
Существует несколько принципиально отличающихся способов для того чтобы отцентрировать объект по вертикали с помощью CSS, однако сложность может быть в выборе правильного. Мы рассмотрим некоторые из них, а также сделаем небольшой сайт, используя полученные знания.
Вертикальное выравнивание по центру с помощью CSS достигается не так просто. Существует множество способов и не все работают во всех броузерах. Давайте рассмотрим 5 различных методов, а также «за» и «против» каждого из них. Пример.
1-ый способ
Этот метод предполагает, что мы устанавливаем некоторому элементу способ отображения как таблица, после этого мы можем использовать в нём свойство vertical-align (которое работает по разному в различных элементах).
#wrapper < display : table; >#cell
Плюсы
- Контент может динамически изменять высоту (высота не определена в CSS).
- Контент не обрезается в случае, если для него недостаточно места.
Минусы
- Не работает в IE 7 и меньше
- Много вложенных тэгов
2-ой метод
Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.
Поскольку высота фиксированная, вы можете установить overflow:auto; для div-а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.
#content < position : absolute; top : 50%; height : 240px; margin-top : -120px; /* минус от половины высоты */ >Плюсы
- Работает во всех броузерах.
- Нет лишней вложенности.
Минусы
- Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.
3-ий метод
В этом методе, мы обернём div с контентом другим div-ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.
#floater < float : left; height : 50%; margin-bottom : -120px; >#content
Плюсы
- Работает во всех броузерах.
- Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары.
Минусы
- Думаю только один: что используется лишний пустой элемент.
4-ый метод.
Этот метод использует свойство position:absolute; для div-а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0;, но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).
#content
Плюсы
- Очень просто.
Минусы
- Не работает в Internet Explorer
- Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.
5-ый метод
С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.
#content
Плюсы
- Работает во всех броузерах.
- Не обрезает текст, если он не влез.
Минусы
- Работает только с текстом (не работает с блочными элементами).
- Если текста больше чем одна строка, то выглядит очень плохо.
Этот способ очень полезен для небольших элементов, например чтобы вырвнять по центру текст в кнопке или в текстовом поле.
Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:
Шаг 1
Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:
- #floater (чтобы выровнять контент по центру)
- #centred (центральный элемент)
- #side
- #logo
- #nav (список
-
)
Напишем следующую html-разметку:
Шаг 2
Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css. Именно на него прописана ссылка в html-файле.
html, body < margin : 0; padding : 0; height : 100%; >body < background : url('page_bg.jpg') 50% 50% no-repeat #FC3; font-family : Georgia, Times, serifs; >#floater < position : relative; float : left; height : 50%; margin-bottom : -200px; width : 1px; >#centered < position : relative; clear : left; height : 400px; width : 80%; max-width : 800px; min-width : 400px; margin : 0 auto; background : #fff; border : 4px solid #666; >#bottom < position : absolute; bottom : 0; right : 0; >#nav < position : absolute; left : 0; top : 0; bottom : 0; right : 70%; padding : 20px; margin : 10px; >#contentПеред тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.
Нижний отступ для элемента "floater"-а равен минус половине высоты контента (400px), а именно -200px;
Сейчас ваша страничка должна выглядеть приблизительно так:
Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.
Поскольку элементу #centered установлено position:relative, мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content, чтобы появлялись скроллбары, в случае если не будет помещаться контент.
Шаг 3
И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.
#nav ul < list-style : none; padding : 0; margin : 20px 0 0 0; text-indent : 0; >#nav li < padding : 0; margin : 3px; >#nav li a < display : block; background-color : #e8e8e8; padding : 7px; margin : 0; text-decoration : none; color : #000; border-bottom : 1px solid #bbb; text-align : right; >#nav li a::after < content : '»'; color : #aaa; font-weight : bold; display : inline; float : right; margin : 0 2px 0 5px; >#nav li a:hover, #nav li a:focus < background : #f8f8f8; border-bottom-color : #777; >#nav li a:hover::after < margin : 0 0 0 7px; color : #f93; >#nav li a:active
Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none, а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.
Обратите внимание, что затем мы указали чтобы ссылки отбражадись как блочные элементы. Теперь, при выводе, они растягиваются по всей ширине элемента в котором они расположены.
Другая интересная вещь, которую мы использовали для меню - это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.
Шаг 4
Ну и самое последнее, мы добавим в наш дизайн кое-какие втили для ещё большей красоты.
#centered < -webkit-border-radius : 8px; -moz-border-radius : 8px; border-radius : 8px; >h1, h2, h3, h4, h5, h6 < font-family : Helvetica, Arial, sans-serif; font-weight : normal; color : #666; >h1 < color : #f93; border-bottom : 1px solid #ddd; letter-spacing : -0.05em; font-weight : bold; margin-top : 0; padding-top : 0; >#bottom < padding : 10px; font-size : 0.7em; color : #f03; >#logo < font-size : 2em; text-align : center; color : #999; >#logo strong < font-weight : normal; >#logo span < display : block; font-size : 4em; line-height : 0.7em; color : #666; >p, h2, h3 < line-height : 1.6em; >a
В этих стилях мы устанавливаем закруглённые углы для элемента #centered. В CSS3, за это будет отвечать свойство border-radius. Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.
Совместимость
Как вы уже наверное предположили, основной источник проблем совместимости - Internet Explorer:
- Элементу #floater обязательно надо установить ширину
- В IE 6 лишние отступы вокруг меню
Как центрировать кнопку внутри элемента?
У меня есть div, ширина которого равна 100%. Я хотел бы сосредоточить на нем кнопку, как я могу это сделать?
foreyez 26 сен. 2011, в 22:40
Поделиться
какой код вы используете для кнопки?
David Nguyen 26 сен. 2011, в 20:21Я подозреваю, что он хочет как вертикальное, так и горизонтальное центрирование. Ни одно из решений до сих пор не достигло этого. CSS не очень хорош в вертикальном центрировании = (.
mrtsherman 26 сен. 2011, в 20:35
позвольте мне сказать, что flexbox делает этот ответ бесполезным в 2014 году. да, детка!
foreyez 03 дек. 2014, в 05:56
возможный дубликат попытки выровнять кнопку html в центре моей страницы
maudulus 26 сен. 2015, в 20:15
Показать ещё 2 комментария
Поделиться:14 ответов
Лучший ответ
Обновленный ответ
Обновление, потому что я заметил, что это активный ответ, однако теперь Flexbox будет правильным.
Вертикальное и горизонтальное выравнивание.
#wrapper
Просто горизонтально (до тех пор, пока основная ось гибкого диска будет горизонтальной по умолчанию)
#wrapper
Исходный ответ с использованием фиксированной ширины и flexbox
Если исходный плакат хочет, чтобы вертикальное и центральное выравнивание было достаточно простым для фиксированной ширины и высоты кнопки, попробуйте следующее
CSS
button
только для горизонтального выравнивания используйте либо
button
Loktar 26 сен. 2011, в 20:42
Поделиться-1 это ужасно По сути, вы устанавливаете ширину на 100%, а затем поле на -50. Но это вызывает другие проблемы, такие как кнопка поднимается над содержащим элементом, и плохо работает с изменением размера.
CodyBugstein 19 март 2014, в 10:29
Эй, спасибо, по крайней мере, за то, что объяснили свой голос "против" @Imray Также обратите внимание, я сказал, что фиксированная ширина и высота, а не переменная. Так что изменение размера не является фактором. «В основном» я установил ширину в 100px , а не в 100%, и на полях -50px, что составляет половину. Это был довольно стандартный метод центрирования. Я с нетерпением жду вашего ответа, хотя 🙂
Loktar 19 март 2014, в 14:32
Ваши слова (извините за резкость, рад, что у вас есть чувство юмора) я имел в виду 100px. Я не понимал, что вы написали «исправлено», но все же я думаю, что этот ответ не будет хорошим в большинстве ситуаций
Как выровнять кнопку по вертикали css
но кнопка не выравнивается по вертикали — почему? Как исправить?
Нужно добавить еще один контейнер, к которому и нужно применить display:table-cell и vertical-align:middle; :
А вообще, можно обойтись и без display:table :
А можно вообще использовать flexbox, тогда можно и убрать vertical-align (это свойство для детей flex-контейнера игнорируется), и убрать display: table-cell (это свойство ничего не поменяет, так как дети flex-контейнера становятся неявно чем-то вроде inline-block ). Демонстрация:
Расположить кнопки по вертикали
Как расположить 4 картинки по горизонтали и 2 по вертикали в 2 ряда
хотел бы узнать как сделать 4 картинки по горизонтале а 2 по вертикале короче в 2 ряда **** **** .
необходимо таблицу расположить по центру по вертикали и по горизонтали
есть таблица, необходимо ее выровнять по центру относительно вертикали и горизонтали, и что бы при.Выравнивание кнопки по вертикали
Нужно чтобы две кнопки находились в центре по вертикали у правого края, но никак не получается.Текст расположить по центру кнопки
Здравствуйте! У меня должно быть несколько кнопок одинакового размера с текстом. .main2
- #side