Как выровнять блок div в php

Как выровнять блоки div?

alt text

Отображается не так как хотелось бы:

Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 22 фев 2013 в 15:21
Родион Поляков Родион Поляков
462 2 2 золотых знака 10 10 серебряных знаков 38 38 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

А как бы хотелось? )) Может так:

.alignright < float: left; >.alignleft

Отслеживать
ответ дан 22 фев 2013 в 15:25
34k 1 1 золотой знак 31 31 серебряный знак 49 49 бронзовых знаков

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как выровнять по центру блок в CSS?

Пусть у нас есть элемент div, внутри которого есть другой div:

Рассмотрим различные способы выравнивания внутреннего блока по центру внешнего в зависимости от исходных данных.

Как выровнять блок по горизонтали?

1. Выравнивание по горизонтали при помощи фиксированных отступов

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

(ширина_внешнего_блока — ширина_внутреннего_блока) / 2

И указать в стилях конкретные значения:

.box < width: 1000px; >.box-content < width: 500px; margin-left: 250px; /* отступ справа вычисляется сам */ >

То же самое возможно использовать и с процентами, ширина внешнего блока при этом принимается за 100%: например, ширина внутреннего блока 60%, значит размер отступов будет равен 20%:

.box-content

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

.box-content

2. Горизонтальное выравнивание при помощи произвольных отступов

Если внутренний блок имеет фиксированную ширину, то чтобы его отцентрировать по горизонтали, достаточно указать отступы справа и слева как auto:

.box-content

Если вложенный элемент .box-content является строчным (img, a, span и др.), то для него понадобится указать display:

.box-content

3. Использование text-align у внешнего блока

text-align также позволяет выполнить выравнивание по горизонтали, в первую очередь он используется для текста.

Например, в данном случае:

 Какой-то текст

Выравнивания по центру можно достичь, указав text-align для .text-box :

.text-box

4. Горизонтальное выравнивание блока при помощи абсолютного позиционирования

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

.box < position: relative; >.box-content

Как выровнять блок по вертикали?

1. Выравнивание текста из 1 строки по вертикали

Если есть блок, в котором размещен текст, занимающий не больше 1 строки (например, кнопка или пункт меню) и известна высота этого блока, то можно задать line-height , равный этой высоте.

Например, для такой структуры:

Пункт меню

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

.menu-item

2. Вертикальное выравнивание блока при помощи абсолютного позиционирования

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

.box < position: relative; >.box-content

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

.box < position: relative; >.box-content

3. Табличное выравнивание по вертикали

Как известно, в таблицах работает vertical-align для выравнивания их контента по высоте.

 Какие-то данные

Если использовать display: table в стилях, то возможно добиться того же:

.table < display: table; width: 100%; >.table-row

4. Вертикальное выравнивание при помощи CSS3-трансформации

CSS3 позволяет выполнять выравнивание буз необходимости добавления внешних блоков. Достаточно иметь один блок:

Какие-то данные

Стили для него будут выглядеть следующим образом, если у него известны высота и ширина:

Если же размеры блока неизвестны, то внешний блок становится нужен:

 Какие-то данные

И стили определяются так:

.box-content

Поделиться статьей «Как выровнять по центру блок в CSS?»

Как выровнить по центру блок с элементами DIV, UL, LI

Admin 18.12.2017 , обновлено: 09.05.2018 CSS, HTML

Разбираем центровку блочных элементов в CCS. Располагаем по центру несколько DIV или LI элементов. Предлагаю несколько своих вариантов на большинство случаев.

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

Иногда для выравнивания по центру достаточно добавить пару атрибутов и не нужно ничего сложного городить. Например, так я центрировал рекламу РТБ от Яндекс.

Ниже несколько вариантов адаптивной вёрстки выравнивания блоков по центру, которые я использую на своих сайтах. И если первый достаточно распространённый, то возможно, какие-то другие способы даже не будут описаны в Интернете именно таким образом.

Вариант 1

Простое выравнивание всех блоков по центру страницы.

Отцентрируем содержимое UL из 4 элементов LI, которые находятся в блоке DIV с классом container.

В таком случае в CSS достаточно следующих правил:

.container ul text-align: center;
list-style: none;
>

.container li display: inline-block;
>

Получим следующий вид:

Если блоки LI с этими свойствами не устанавливаются по центру, значит какое-то другое свойство им мешает. Например, это может быть свойство float:left или display: table; или какое-то иное.

Теперь верхнюю структуру (в базовый каркас выравнивания CSS) можно добавить и другие стили. Например, сделать фиксированного размера блоки и отступы друг от друга:

.container li <
display: inline-block;
margin: 5px;
width: 100px;
>

Но в таком варианте есть один минус. Блоки расположены по центру, но слева и справа огромные расстояния. Их можно уменьшить изменяя width.

А можно сделать контейнеры одинакового размера так, чтобы отступы были только между контейнерами, а слева и справа их не будет.

Тогда мы уберём margin и добавим ширину такого width, чтобы он полностью покрывал область.

.container li <
vertical-align: top;
display: inline-block;
width: 32.899%;
>

Между блоками останется небольшой участок пустого пространства. А чтобы его сделать ещё больше, можно отступать внутри с помощью параметра padding.

В блоках я специально не добавляю ничего лишнего, чтобы оставить ровно те стили которые непосредственно влияют на выравнинвание. Но если вы сделаете тоже самое, то такие блоки не получить. Хотя бы потому что, во-первых, нужно добавить цвет к блоку, а во-вторых, если он пустой поставить height: 100px;. Другие атрибуты уже по своему вкусу.

Итоговый вариант такой:

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

Вариант 2

Для центровки блоков придумано очень много способов. А вот если нужно центровку сделать более умной, тут приходиться поломать голову. К счастью, я вывел один интересный способ для следующих целей:

Как выровнять все блоки div по центру так, чтобы блок на следующей строке выравнивался по левому краю?

Имеем следующую структуру:

Блок 1

Блок 2

Блок 3

Блок 4

Блок 5

Для них прописываем классы:

.archive-container-for-articles <
width: 90%;
margin: 0 auto;
>

.archive-article display: inline-block;
vertical-align: top;

width: calc(33.3333% — ( 0.666666666667 * 36px ) );
margin: 0 10px 0 11px;
>

Следует обратить внимание, что если менять размеры calc, то затем надо подстраивать экспериментальным путём размеры margin. Иначе блоки не будет располагаться по центру.

Эту центровку приходиться делать на глаз. Зато, если на новой строке блоков меньше, чем на строке выше, этот одинокий блок будет с левой стороны. И это смотрится куда симпатичнее, чем когда на следующей строке один единственный блок располагается по центру.

Применив технику выше, мы получим адаптивную вёрстку, со всеми равными краями, которая не будет портиться при изменении размеров экрана.

А если мы хотим, чтобы на мобильной версии было не 3 блока, а 2, то в ccs для разрешения 768 пикселей, разобьём блоки иначе:

@media screen and (max-width: 768px) <
.archive-article <
width: calc(47.3333% — ( 0.666666666667 * 25px ) );
margin: 0 10px 0 20px;
>
>

Получим те же блоки в мобильном варианте, но уже по два блока на строку:

Вариант 3

Теперь будем выравнивать с помощью flex. Может показаться, что это идеальный способ выравнивания, потому что он действительно работает очень просто. Однако FLEX не справляется с задачей описанной в варианте 2. По крайней мере, у меня не получалось достигнуть тех же результатов.

К следующей секции:

#cssmenu ul list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
>

#cssmenu > ul > li margin: 1px;
>

В приведенном примере:

flex-wrap: wrap;

Перекидывает блоки на следующую строку, если они заполняют контейнер. Иначе они будут уходить дальше за окно браузера.

justify-content: center;

Мы выравниваем содержимое блоков по центру.

Вариант 4

Ещё один вариант выравнивания с помощью технологии flex.

Имеем контейнер с двумя блоками внутри. Нам нужно, чтобы эти 2 блока делили ширину на две равные стороны.

Для этого пропишем в стилях следующие свойства:

Вариант 5

Есть ещё один вариант центровки блоков, если их строго равное количество. Например: блоков 9, по 3 на каждую строчку. И вы знаете, что так будет оставаться всегда. Например, вы делаете лендинг пейдж и знаете наверняка, что ничего лишнего между этими блоками добавляться на сайт не будет.

Итак, имеем 9 блоков следующего вида (не стал дублировать 9 раз строки, но имейте ввиду, что блоков 9):

Блок 1

Блок 2

Блок 3

Применяем стили для них:

.archive-container-for-articles <
width: 100%;
text-align: center;
>

.archive-article width: 25%;
vertical-align: top;
display: inline-block;
text-align: left;
>

.archive-article:nth-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) margin: 20px 0 30px 40px;
>

.archive-article:nth-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) margin: 20px 40px 30px;
>

.archive-article:nth-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) margin: 20px 40px 30px 0;
>

Получим тоже адаптивную вёрстку. При уменьшении экрана не помещающийся блок будет уходить в центр низа

Преимущество данного вида центровки в том, что вы можете четко и понятно проделать отступы между блоками.

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

вот здесь

будь то div или p или ещё что-то, будет считаться как внутренний элемент nth-child. В результате на него наложится стили CSS и все отступы сделанные с помощью margin сместят блоки не так как было задумано изначально.