Css display inline block выравнивание

How to center things — display:block/inline-block

Elements can either be inline (meaning they all sit next to each other — like a span tag) or they can be block (meaning the stack up on top of each other — like a div tag).

Margin: auto, while a bit odd when you first see it, is the best and only way to center a block level (position static), element.

For anything that is display: inline (like a span tag) — the only way to center it is if you specify text-align: center on the parent. This will center everything display: inline inside it that is position: static;

Display: inline-block is a hybrid of the two that is relatively new (but supported as far back as ie7 if you use the hack mentioned in another answer). With inline-block, you get the benefits of inline, in that you can you stick a bunch of things next to each other and have them all be centered (think of a nav where all nav items are all centered), but ALSO have each item take advantage of some of the stuff you get with display: block — the most important one being HEIGHT.

Imagine a scenario where each nav item has a background image that is 80px tall — you can’t make an inline element have a height of 80 — so you’d have to make each element display: block — only then can you give it a height. So to make them all appear next to each other, you’d float them. The problem is if you float them, you can’t have them all be centered on the page unless you give a fixed width to the nav and margin: auto THAT. This means the nav has a fixed width — might be okay, but there are times when the nav has to have dynamic elements, different widths for different languages, etc.

Enter display: inline-block.

Источник

Как выровнять элементы inline-block по верхней границе контейнера

Многие разработчики сталкиваются с проблемой выравнивания элементов inline-block. Проблема в том, что когда высота нескольких div отличается, div с наименьшей высотой не выравнивается по верхней границе контейнера. Мы покажем решение этой проблемы с помощью CSS свойств.

1. Создайте HTML

div span >span> span >span> div>

2. Создайте CSS

• Задайте height и width для классов.
• Добавьте color, width и style к border.
• Задайте background для блоков и установите display в значение inline-block, которое отображает элемент в виде блока с внутренней стороны, а с внешней стороны он отображается как строчный элемент.

.container < border: 1px solid #666666; width: 350px; height: 150px; > .small-box< display: inline-block; width: 40%; height: 30%; border: 1px solid #666666; background: #1c87c9; > .big-box < display: inline-block; border: 1px solid #666666; width: 40%; height: 50%; background: #8ebf42; >

Пример

html> html> head> title>Заголовок документа title> style> .container < border: 1px solid #666666; width: 350px; height: 150px; > .small-box< display: inline-block; width: 40%; height: 30%; border: 1px solid #666666; background: #1c87c9; > .big-box < display: inline-block; border: 1px solid #666666; width: 40%; height: 50%; background: #8ebf42; > style> head> body> div class="container"> span class="small-box"> span> span class="big-box"> span> div> body> html>

Нашей проблемой является выравнивание .small-box по верхней границе контейнера.

Ключевое слово «top» свойства vertical-align поможет нам в этом вопросе.

Свойство vertical-align указывает вертикальное выравнивание строчного элемента. Значение «top» выравнивает верхний край элемента с верхней линией блока.

Необходимо применить его к .small-box только для того, чтобы он начинался сверху контейнера:

.small-box< vertical-align: top; >

Теперь наша проблема решена с помощью использования только одного CSS свойства. Давайте посмотрим код полностью.

Пример

html> html> head> title>Заголовок документа title> style> .container < border: 1px solid #666666; width: 350px; height: 150px; > .small-box< display: inline-block; width: 40%; height: 30%; border: 1px solid #666666; background: #1c87c9; vertical-align:top; > .big-box < display: inline-block; border: 1px solid #666666; width: 40%; height: 50%; background: #8ebf42; > style> head> body> div class="container"> span class="small-box"> span> span class="big-box"> span> div> body> html>

Рассмотрим пример, где высота одного из элементов div больше, чем высота остальных элементов .

Пример, где произошла ошибка:

Пример

html> html> head> title>Заголовок документа title> style> #box-one < background-color: #1c87c9; > #box-two < background-color:#8ebf42; > #box-three < background-color: #cccccc; > #box-four < background-color: #666666; > .normal < height:100px; width:100px; display:inline-block; > .big < height:200px; width:200px; display:inline-block; > ul < display:block; > ul li< display:inline; > style> head> body> ul> li> span id="box-one" class="normal">Blue span> li> li> span id="box-two" class="normal">Green span> li> li> span id="box-three" class="normal">Grey span> li> li> span id="box-four" class="big"> Как выровнять верхние границы всех цветных div. span> li> ul> body> html>

Нам просто необходимо заменить свойство display на свойство float со значением «left». Мы используем свойство float , которое в большинстве случаев используется вместе со свойством clear. Оно указывает, с каких сторон могут находиться плавающие элементы. В этом примере мы установили clear в «both». Это означает, что плавающие элементы запрещены с правой и левой стороны.

Пример

html> html> head> title>Заголовок документа title> style> #box-one < background-color: #1c87c9; > #box-two < background-color:#8ebf42; > #box-three < background-color: #cccccc; > #box-four < background-color: #666666; > .normal < height:100px; width:100px; display:inline-block; > .big < height:200px; width:200px; display:inline-block; > ul < display:block; clear:both; content:""; display: table; > ul li< float:left; list-style-type:none; > style> head> body> ul> li> span id="box-one" class="normal">Blue span> li> li> span id="box-two" class="normal">Green span> li> li> span id="box-three" class="normal">Grey span> li> li> span id="box-four" class="big"> Как выровнять верхние границы всех цветных div. span> li> ul> body> html>

В следующем примере можно увидеть выравнивание элементов уровня inline-block, используя ключевое слово «flex» свойства display, которое используется с расширением -Webkit-.

Пример

html> html> head> title>Заголовок документа title> style> div< color:#ffffff; display:flex; display: -webkit-flex; align-items:flex-start; -webkit-align-items:flex-start; > #box-one < background-color: #1c87c9; > #box-two < background-color:#8ebf42; > #box-three < background-color: #cccccc; > #box-four < background-color: #666666; > .normal < height:100px; width:100px; display:inline-block; > .big < height:200px; width:200px; display:inline-block; padding:10px; > style> head> body> div> span id="box-one" class="normal">Blue span> strong id="box-two" class="normal">Green strong> span id="box-three" class="normal">Grey span> span id="box-four" class="big"> Как выровнять верхние границы всех цветных div. span> div> body> html>

Источник

Выравниваем блок по центру страницы

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

Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.

Вариант 1. Отрицательный отступ.

Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.

Вариант 2. Автоматический отступ.

Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.

Вариант 3. Таблица.

Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.

Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/xkb615mu.

Вариант 4. Псевдо-элемент.

Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.

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

Вариант 5. Flexbox.

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

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

Вариант 6. Transform.

Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script’а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .

Вариант 7. Кнопка.

Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.

Бонус

Используя идею 4-го варианта, можно задавать внешние отступы для блока, и при этом последний будет адекватно отображаться в окружении скроллбаров.
Пример: jsfiddle.net/serdidg/ugnp8ry7.

Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя, масштабировать её по размеру родителя.
Пример: jsfiddle.net/serdidg/Lhpa1s70.
Пример с большой картинкой: jsfiddle.net/serdidg/tor2yudn.

Источник