Как центрировать элемент css по вертикали

Как центрировать элементы по вертикали в Zurb Foundation?

Я создаю форму входа и хочу, чтобы поля имени пользователя и пароля располагались в центре экрана. Я также использую пакет Zurb Foundation для создания этой формы. У меня много проблем с центрированием вещей по вертикали.

И немного CSS, с которым я поигрался, но еще не успел поработать:

Как ни странно, если я изменил высоту чего-либо, сделав его динамическим (например, height: 30%; ), это не сработает, почему?

3 ответа

ОБНОВЛЕНИЕ

Эта функция будет включена в качестве компонента (xy-center) в следующую версию Foundation. Подробнее см. Github.

HTML

CSS

Результат

Форма входа останется по центру по вертикали и горизонтали независимо от размера экрана. Вот скриншот результата.

enter image description here

Foundation плохо справляется с вертикальным выравниванием: https://github.com/zurb/foundation/issues/411 .

Вы можете аппроксимировать это с помощью вертикального заполнения, но для динамического контента нет удобного способа обойти это.

Следующий jsFiddle (не созданный мной) показывает, как он должен работать, используя

http://jsfiddle.net/53ALd/6/ — но не будет вместе с остальной частью CSS Foundation .

Проблема в том, что HTML / CSS не очень хорошо справляется с вертикальным центрированием. Фонд Зурба не собирается ни помогать, ни навредить вам в этом отношении.

Как центрировать элемент по горизонтали и вертикали

Я пытаюсь центрировать содержимое вкладок по вертикали , но когда я добавляю стиль CSS display:inline-flex , горизонтальное выравнивание текста исчезает.

Как я могу сделать оба выравнивания текста x и y для каждой из моих вкладок?

23 ответа

Как мне центрировать текст по горизонтали и вертикали в TextView , чтобы он появился точно в середине TextView в Android ?

Лучший способ центрировать элемент <div> на странице как по вертикали, так и по горизонтали? Я знаю, что margin-left: auto; margin-right: auto; будет центрироваться по горизонтали,но как лучше всего сделать это и по вертикали?

Подход 1 — transform translateX / translateY :

В поддерживаемых браузерах (большинство из них) вы можете использовать top: 50% / left: 50% в сочетании с translateX(-50%) translateY(-50%) для динамического вертикального/горизонтального центрирования элемента.

Подход 2 — Flexbox метод:

В поддерживаемых браузерах установите для display целевого элемента значение flex и используйте align-items: center для вертикального центрирования и justify-content: center для горизонтального центрирования. Просто не забудьте добавить префиксы поставщиков для дополнительной поддержки браузера ( см. пример ).

Подход 3 — table-cell / vertical-align: middle :

В некоторых случаях вам нужно будет убедиться, что высота элемента html / body установлена на 100% .

Для выравнивания по вертикали установите для родительского элемента width / height значение 100% и добавьте display: table . Затем для дочернего элемента измените display на table-cell и добавьте vertical-align: middle .

Для горизонтального центрирования вы можете добавить text-align: center для центрирования текста и любые другие дочерние элементы inline . В качестве альтернативы вы можете использовать margin: 0 auto , предполагая, что элемент имеет уровень block .

Подход 4 — Абсолютно позиционируется 50% сверху со смещением:

Этот подход предполагает, что текст имеет известную высоту — в данном случае 18px . Просто расположите элемент 50% сверху относительно родительского элемента. Используйте отрицательное значение margin-top , равное половине известной высоты элемента, в данном случае — -9px .

Подход 5 — Метод line-height (Наименее гибкий — не предлагается):

В некоторых случаях родительский элемент будет иметь фиксированную высоту. Для вертикального центрирования все, что вам нужно сделать, это установить значение line-height для дочернего элемента, равное фиксированной высоте родительского элемента.

Хотя это решение будет работать в некоторых случаях, стоит отметить, что оно не будет работать, когда есть несколько строк текста, как это .

Почему попытка выровнять что-то в центре окна просмотра (или обертки) по вертикали или горизонтали (или и то, и другое) так болезненна? За последний час я перепробовал все, что мог найти, от сайтов типа W3Schools до S/O и MSDN — я просто не знаю, как это сделать. Должен быть простой способ сделать.

Я довольно много гуглил и, кажется, не могу найти ничего, что имело бы для меня смысл. Мне нужно центрировать содержимое webview как по вертикали, так и по горизонтали. Я смог заставить горизонталь работать с этим: — (void)webViewDidFinishLoad:(UIWebView *)webView < NSString *bodyStyle =.

Если CSS3 является опцией (или у вас есть запасной вариант), вы можете использовать преобразование:

В отличие от первого подхода выше, вы не хотите использовать left:50% с отрицательным переводом, потому что в IE9+есть ошибка переполнения. Используйте положительное правое значение, и вы не увидите горизонтальных полос прокрутки.

Лучший способ центрировать коробку как по вертикали, так и по горизонтали-использовать два контейнера :

##The контейнер для выгрузки :

  • должно быть display: table;

##The внутренний контейнер :

  • должно быть display: table-cell;
  • должно быть vertical-align: middle;
  • должен был text-align: center;

##The коробка с содержимым :

  • должно быть display: inline-block;
  • следует настроить горизонтальное выравнивание текста, если вы не хотите, чтобы текст был центрирован

Смотрите также это Fiddle !

##Centering в середине страницы:

Чтобы центрировать содержимое в середине страницы, добавьте во внешний контейнер следующее :

  • position : absolute;
  • width: 100%;
  • height: 100%;

Вот демонстрация для этого :

Смотрите также это Fiddle !

Вот как использовать 2 простых свойства flex для центрирования n divs на 2 оси:

  • Установите высоту вашего контейнера: здесь тело должно быть не менее 100 вч.
  • align-items: center будет вертикально центрировать блоки
  • justify-content: space-around распределит свободное горизонтальное пространство вокруг дивов

Запустите этот фрагмент кода и увидите выровненный по вертикали и горизонтали div.

Самым простым и чистым решением для меня является использование свойства CSS3 "transform":

Первый ребенок будет выровнен по вертикали и горизонтали в центре

Другой подход заключается в использовании таблицы:

Ниже приведен подход Flex-box для получения желаемого результата

чтобы центрировать Div на странице check the fiddle link

Обновление Другой вариант — использовать flex box check the fiddle link

Для вертикального и горизонтального центрирования элемента мы также можем использовать следующие свойства.

Это свойство CSS выравнивает элементы по вертикали и принимает следующие значения:

flex-start : Элементы выравниваются по верхней части контейнера.

гибкий конец : Элементы выравниваются по дну контейнера.

центр : Элементы выравниваются по вертикальному центру контейнера.

базовая линия : Элементы отображаются в базовой линии контейнера.

растягивание : Элементы растягиваются, чтобы соответствовать контейнеру.

Это свойство CSS justify-content , которое выравнивает элементы по горизонтали и принимает следующие значения:

flex-start : Элементы выравниваются по левой стороне контейнера.

гибкий конец : Элементы выравниваются по правой стороне контейнера.

центр : Элементы выравниваются по центру контейнера.

пробел : элементы отображаются с равным расстоянием между ними.

пространство вокруг : элементы отображаются с равным расстоянием между ними.

Сеточный подход css

CSS Grid: place-items

Наконец, у нас есть сетка place-items: center для CSS, чтобы сделать это проще.

HTML

CSS

Выход:

Просто сделайте верхний,нижний, левый и правый равными 0.

Вы можете достичь этого с помощью сетки CSS (ваш элемент display:inline-grid + grid-auto-flow: row; ) и гибкой коробки ( родительский элемент display:flex; ),

См. ниже фрагмент

Нужно следовать следующему новому и простому решению :

Если вы предпочитаете его без :
flexbox / сетка / таблица
или без :
vertical-align: middle

Вы можете сделать:

HTML

CSS

  • Подход 6

Способ 1) Тип дисплея flex

Способ 2) Преобразование 2D

Смотрите другие методы здесь

Самый простой способ центрирования div как по вертикали, так и по горизонтали заключается в следующем:

Еще Один Пример :

Это связано с тем, что люди могут прийти на эту страницу при поиске: когда я хочу центрировать div для (100px квадрат) "waiting.." анимированный gif я использую :

Это должно сработать

Самый простой подход flexbox :

Самый простой способ центрировать один элемент по вертикали и горизонтали — это сделать его гибким элементом и установить его поле равным auto :

Если вы применяете автоматические поля к гибкому элементу, этот элемент будет автоматически расширьте его заданное поле, чтобы занять дополнительное пространство в контейнере flex.

Это расширение полей в каждом направлении подтолкнет элемент точно к середине его контейнера.

Похожие вопросы:

У меня есть фиксированный элемент без ширины и высоты,просто содержащий какой-то гибкий текст. Когда я хочу центрировать там текст по вертикали и горизонтали, я потерпел неудачу. Как этого добиться.

Я хотел бы центрировать текст как по вертикали, так и по горизонтали apple. Я перепробовал все уже предложенные решения (внутренний div, вертикальное выравнивание, margin:auto. ) Я просто не.

Мне нужно центрировать текст между пунктирной границей по вертикали и горизонтали, как показано на рисунке ниже : У меня есть очень простой fiddle, который пытается достичь этого. Как можно изменить.

Как мне центрировать текст по горизонтали и вертикали в TextView , чтобы он появился точно в середине TextView в Android ?

Лучший способ центрировать элемент <div> на странице как по вертикали, так и по горизонтали? Я знаю, что margin-left: auto; margin-right: auto; будет центрироваться по горизонтали,но как лучше.

Почему попытка выровнять что-то в центре окна просмотра (или обертки) по вертикали или горизонтали (или и то, и другое) так болезненна? За последний час я перепробовал все, что мог найти, от сайтов.

Я довольно много гуглил и, кажется, не могу найти ничего, что имело бы для меня смысл. Мне нужно центрировать содержимое webview как по вертикали, так и по горизонтали. Я смог заставить горизонталь.

Как я могу центрировать модальный диалог по вертикали и горизонтали на странице?

Я пытаюсь центрировать MKMapView по горизонтали и вертикали в контроллере вида: Всякий раз, когда я пытаюсь использовать ограничения автоматической компоновки, карта исчезает при запуске приложения.

Я хотел бы знать, как центрировать содержимое текстового виджета по вертикали и горизонтали в Flutter. Я знаю только, как центрировать сам виджет с помощью Center(child: Text("test")) , но.

Как центрировать текст по вертикали с помощью CSS?

Anonim

Это работает только для одной строки текста, потому что мы устанавливаем высоту строки на ту же высоту, что и содержащий элемент box.

Более универсальный подход

Это еще один способ выровнять текст по вертикали. Это решение будет работать для одной строки и нескольких строк текста, но по-прежнему требует контейнера фиксированной высоты:

CSS просто определяет размер

Моделирование отображения таблицы

А вот еще один вариант, который может не работать в старых браузерах, не поддерживающих display: table и display: table-cell (в основном просто Internet Explorer 7). Используя CSS, мы моделируем поведение таблицы (поскольку таблицы поддерживают вертикальное выравнивание), а HTML такой же, как и во втором примере:

Использование абсолютного позиционирования

Этот метод использует абсолютно позиционированный элемент, устанавливающий верхний, нижний, левый и правый угол в 0. Более подробно он описан в статье в Smashing Magazine. Абсолютное горизонтальное и вертикальное центрирование в CSS.

  • 60 Потому что что-то идет не так, если div или текст изменяются или добавляется больше содержимого.
  • 12 Но это то, что он сказал, если вы знаете, сколько текста вы будете использовать, это вполне приемлемо . решение ниже, однако, более гибкое
  • 3 В моем Firefox 22.0 хорошо работает только 3-й подход, однако он работает не во всех браузерах. Первые 2 подхода перестают работать должным образом, как только я изменяю размер высоты для div
  • 7 Как я могу достичь той же цели, установив высоту div на: "height: 100%;" ?
  • 9 table-cell техника довольно крутая, но затем содержимое изменяется, чтобы соответствовать родительскому контейнеру. Вот отличная техника от CSS Tricks с использованием псевдоэлемента before : css-tricks.com/centering-in-the-unknown. Размер содержимого таким образом не изменяется, но он работает только в IE8 +.

Другой способ (здесь еще не упомянут) — использование Flexbox.

Просто добавьте следующий код в контейнер элемент:

Демонстрация Flexbox 1

В качестве альтернативы, вместо выравнивания содержимого через контейнер, flexbox также может центрировать a гибкий элемент с автоматическим запасом когда в гибком контейнере есть только один flex-элемент (как в примере, приведенном в вопросе выше).

Итак, чтобы центрировать гибкий элемент по горизонтали и вертикали, просто установите его с помощью margin:auto

Flexbox Demo 2

NB: Все вышесказанное относится к центрированию предметов при их раскладке в горизонтальные ряды. Это также поведение по умолчанию, потому что по умолчанию значение для flex-direction является row . Если же flex-элементы необходимо разместить в вертикальные колонны, тогда flex-direction: column должен быть установлен на контейнере, чтобы установить главную ось в качестве столбца и дополнительно justify-content и align-items свойства теперь работают наоборот с участием justify-content: center центрирование по вертикали и align-items: center центрирование по горизонтали)

flex-direction: column демо

Хорошее место для начала работы с Flexbox, чтобы увидеть некоторые его функции и получить синтаксис для максимальной поддержки браузера, — это flexyboxes.

Кроме того, поддержка браузеров в настоящее время очень хорошая: caniuse

Для кроссбраузерной совместимости для display: flex и align-items , вы можете использовать следующее:

  • 46 Опорный стол Flexbox
  • 3 Это работает и для меня, остальное выше не работает на моем сайте. Но визуальная студия не распознает display: flex .
  • Скрипка вообще не работает, текст по-прежнему на верхнем краю
  • 1 если у меня есть тег

Вы можете легко сделать это, добавив следующий фрагмент кода CSS:

Это означает, что ваш CSS, наконец, выглядит так:

  • 6 Однако похоже, что это убивает атрибуты поля.
  • 2 @Costa — Возможно, вам также придется разместить родительский div, если вы что-то перемещаете внутри этого div . проверьте stackoverflow.com/questions/2062258/…
  • к сожалению, это не поддерживает вертикальную прокрутку . вероятно, из-за display: table-cell . (
  • 2 Отключает min-heigth .

Для справки и для добавления более простого ответа:

Или как миксин SASS / SCSS:

Сообщение в блоге Себастьяна Экстрёма Вертикальное выравнивание всего с помощью всего 3 строк CSS:

Этот метод может привести к размытию элементов из-за того, что элемент размещен на &#171;половине пикселя&#187;. Решением для этого является установка его родительского элемента на preserve-3d. Как следующее:

Мы живем в 2015+, и Flex Box поддерживается всеми основными современными браузерами.

Так будут и дальше делаться сайты.

Узнать его!

  • 3 Чистый CSS: помогло мне, но мне почему-то пришлось использовать absolute позиционирование ..
  • У меня была та же проблема, что и у @ d4Rk. Мой (блочный) контейнер имел относительное позиционирование и высоту, а элемент, требующий вертикального центрирования (изображение), должен был быть абсолютно позиционирован. Какая сложная / простая проблема !! Надеюсь, что в следующей версии CSS будет простое / простое исправление.

Вся заслуга принадлежит владельцу этой ссылки @Sebastian Ekstr m Link; пожалуйста, пройдите через это. Посмотрите код в действии. Прочитав эту статью, я также создал демонстрационную скрипку.

С помощью всего трех строк CSS (исключая префиксы поставщиков) мы можем сделать это с помощью преобразования: translateY вертикально центрирует все, что мы хотим, даже если мы не знаем его высоту.

Преобразование свойств CSS обычно используется для поворота и масштабирования элементов, но с его функцией translateY теперь мы можем выравнивать элементы по вертикали. Обычно это нужно делать с абсолютным позиционированием или установкой высоты строки, но для этого вам необходимо знать высоту элемента или работать только с однострочным текстом и т. Д.

Итак, для этого пишем:

Это все, что вам нужно. Это метод, аналогичный методу абсолютного положения, но с той стороны, что нам не нужно устанавливать какую-либо высоту для элемента или свойства положения для родительского элемента. Он работает прямо из коробки, даже в Internet Explorer 9!

Чтобы сделать его еще более простым, мы можем написать его как миксин с его префиксами поставщика.

  • изменяя размер шрифта, он перемещается повсюду

В флексбоксах CSS3 есть небольшая магия:

Наконечник: Замените строку выше, отмеченную как &#171;Ключевая часть&#187;, одной из этих строк, если вы хотите центрировать текст:

Только по вертикали:

Только по горизонтали:

Как я заметил, этот трюк работает с сетками (т.е. display: grid ), также.

  • Не могли бы вы объяснить, почему в данном случае флекс так влияет на центрирование абзаца?
  • @elena На самом деле, я не знаю, почему, я обнаружил, когда пытался. Однако это будет рассмотрено для более новых версий CSS. Например, если вы измените отображение на сетку в этом случае, он будет работать так же, как гибкие боксы. Я думаю, что сетки и флексбоксы содержат новые функции, позволяющие компенсировать предыдущие ошибки CSS; и этот трюк — один из них.

Гибкий подход

Я видел предыдущие ответы, и они будут работать только для этой ширины экрана (не реагируют). Для отзывчивости нужно использовать flex.

Решение, принятое в качестве ответа, идеально подходит для использования line-height такая же, как высота div, но это решение не работает идеально, когда текст обернут ИЛИ находится в двух строках.

Попробуйте это, если текст обернут или находится на нескольких строках внутри div.

Для получения дополнительной информации см .:

Многострочный текст по центру по вертикали

6 методов вертикального центрирования с помощью CSS

Попробуйте это решение:

Создан с использованием CSS +.

Вы можете использовать следующий фрагмент кода в качестве справки. Для меня это работает как шарм:

Вывод приведенного выше фрагмента кода выглядит следующим образом:

Вы также можете использовать свойства ниже.

    Спасибо satwik boorgula, я не думаю, что у вас проблемы с кодом, возможно, в моем коде есть конфликт. Я тестирую этот код:

Не устанавливайте height атрибут div , но вместо этого используйте padding: для достижения эффекта. Как и в случае с высотой строки, он работает, только если у вас одна строка текста. Хотя таким образом, если у вас больше контента, текст все равно будет центрирован, но сам div будет немного больше.

Итак, вместо того, чтобы идти с:

Ты можешь сказать:

Это установит верх и низ padding из div к 60px , а слева и справа padding к нулю, делая div 120 пикселей (плюс высота шрифта) в высоту и размещение текста вертикально по центру в div.

Вот еще один вариант использования flexbox.

Результат

Вот отличная статья о центрировании в css. проверьте https://ishadeed.com/article/learn-css-centering/

  • Это лучший ответ. Просто и без фиксированных значений высоты и ширины.

Я не уверен, что кто-то пошел writing-mode маршрут, но я думаю, что он решает проблему чисто и имеет широкая поддержка:

Это, конечно, будет работать с любыми размерами, которые вам нужны (кроме 100% родительского). Если вы раскомментируете границы, будет полезно ознакомиться.

Демо JSFiddle для вас.

Поддержка Caniuse: 85,22% + 6,26% = 91.48% (есть даже Internet Explorer!)

Для всех ваших потребностей в вертикальном выравнивании!

Объявите этот Mixin:

Затем включите его в свой элемент:

  • 2 Отлично работает. Просто комментарий для некоторых читателей: это код Sass.

Еще лучшая идея для этого. Вы тоже можете это сделать

Для одной строки текста (или одного символа) вы можете использовать эту технику:

Это мочь использоваться, когда #box имеет нефиксированный, относительная высота в%.

Посмотрите живую демонстрацию на JsBin (проще редактировать CSS) или JsFiddle (легче изменить высоту рамки результата).

Если вы хотите разместить внутренний текст в HTML, а не в CSS, вам необходимо обернуть текстовое содержимое дополнительными в линию элемент и редактировать #box::after чтобы соответствовать этому. (И, конечно, content: собственность должна быть удалена.)

Для поддержки Internet Explorer 8 необходимо заменить :: с участием : .

  • Из всех методов, описанных здесь, ваш был единственным, который творит чудеса. Мой случай: div, у которого был элемент span со значком вращающихся часов с использованием css (для слоя загрузки). Я просто удалил "TextContent" (оставив свойство как пустую строку) для #box :: after, и все.

Попробуйте свойство transform:

Самый простой и универсальный способ (как и в случае с таблицей Михилву):

Использование этого атрибута (или эквивалентного класса) в родительском теге работает даже для многих дочерних элементов для выравнивания:

Очень простое и мощное решение для вертикального выравнивания центра:

  • 1 Но это не вертикальный центр .
  • 1 Это если поменять "верх: 45%;" на &#171;верх: 50%;&#187;. Просто попробовал с одной, двумя, тремя линиями в круге, и центр был идеально выровнен.

Следующий код поместит div в середину экрана независимо от размера экрана или div размер:

Подробнее о flex Вот.

Попробуйте следующий код:

Я просто хотел бы расширить ответ от Michielvoo, чтобы освободить потребность в высоте строки и дыхании высоты div. По сути, это просто упрощенная версия, подобная этой:

ПРИМЕЧАНИЕ: закомментирована часть css необходимо для fixed-height вложения div .

Мне нужен был ряд интерактивных слонов с вертикальным центрированием, но без использования стола, чтобы обойти некоторые странности Internet Explorer 9.

В конце концов я нашел самый лучший CSS (для своих нужд), и он отлично работает с Firefox, Chrome и Internet Explorer 11. К сожалению, Internet Explorer 9 все еще смеется надо мной .

Очевидно, что границы вам не нужны, но они могут помочь вам понять, как это работает.

Вы можете использовать метод позиционирования в CSS:

Посмотрите результат здесь .

Надеюсь, вы тоже воспользуетесь этим методом.

Установите это в button вместо div если вас не волнует его небольшой визуальный 3D-эффект.

Абсолютное позиционирование и растяжка

Как и в случае с описанным выше методом, этот начинается с установки позиционирования родительского и дочернего элементов как относительного и абсолютного соответственно. Оттуда все по-другому.

В приведенном ниже коде я снова использовал этот метод для центрирования дочернего элемента по горизонтали и вертикали, хотя вы можете использовать этот метод только для вертикального центрирования.

HTML

CSS

Идея этого метода состоит в том, чтобы попытаться заставить дочерний элемент растянуться на все четыре края, установив верхнее, нижнее, правое и левое значения на 0. Поскольку наш дочерний элемент меньше, чем наши родительские элементы, он не может охватить все. четыре края.

Однако установка auto в качестве поля со всех четырех сторон приводит к тому, что противоположные поля становятся равными и отображает наш дочерний div в центре родительского div.

К сожалению, вышеуказанное не будет работать в Internet Explorer 7 и более ранних версиях, и, как и в предыдущем методе, содержимое дочернего div может стать слишком большим, что приведет к его скрытию.

Добавьте этот небольшой код в свойство CSS вашего элемента. Это превосходно. Попытайся!

Новые браузеры теперь поддерживают CSS calc функция. Если вы ориентируетесь на эти браузеры, вы можете попробовать сделать что-то вроде этого:

Ключ в том, чтобы использовать style = ‘top: calc(50% — &lsqb;innerFixedHeightInPX/2&rsqb;px); height: &lsqb;innerFixedHeightInPX&rsqb;px;’ внутри абсолютного или относительно позиционированного родительского div.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *