Блок div по центру страницы – html — Сделать блок div по центру родительского блока, а содержимое блока div выровнять по правому краю

Leave a Comment / Разное / By /

Выравнивание блоков div по центру (css, div html). — deadblog.ru

Выравнивание блоков div по центру (css, div html).

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

Выравнивание div по центру

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

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

Итак, что мы имеем?

Способ 1. Самый крутой

margin:0 auto;

Очень эффективный метод, который к тому-же позволяет выровнять отступы сверху и снизу. В чём фишка метода? Всё просто до безумия. Мы имеем блок с определённой шириной (в пикселях, либо процентах), которому с помощью свойства «auto» задаём одинаковый отступ справа и слева, в итоге получаем div-блок по центру. Первое значение (0 в примере) — это отступ сверху и снизу.

К примеру, для выравнивания сверху пишем:

margin:10px auto;

Для выравнивания сверху и снизу:

margin:10px auto 5px;

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

Способ 2. Процентный

Если блок имеет ширину в процентах, то мы можем выровнять div по центру применяя равные отступы, чтобы добить полную ширину до 100%. Кто не понял, покажу на примере, так проще:

Имеем блок шириной 50%, чтобы выровнять его по центру, нам нужно боковые отступы сделать по 25% справа и слева соответственно. Смотрим код:

#test2 {
  margin:0 25% 0 25%;
  width:50%;
}

Не напрягаясь, получаем блок по центру, выровненный банальной математикой (50 + 25 + 25) 🙂

Способ 3. Смешанный

Данный способ посоветовал в комментариях sman.

#test3 {
  left: 50%;
  margin-left: -500px;
  position: absolute;
  width: 1000px;
}

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

Способ 4. Использование дополнительного блока

Способ предложил Виктор в комментариях:

Ни один метод не решает проблему с float внутри блока, если ширина блока заведомо не известна (например, меню).

В таких случаях использую дополнительный блок, который обворачивает выравниваемый блок. Стиль примерно так:

#dop-block {
  position: relative;
  float: right;
  right: 50%;
}
#block {
  position: relative;
  float: left;
  left: 50%;
}

Как сделать выравнивание по центру ?

Приветствую вас, дорогие друзья!

Сегодня мы рассмотрим с вами еще один прием работы c CSS, а именно, как сделать выравнивание по центру <div>. При всей своей простоте данный вопрос может поставить в тупик не только начинающего, а в некоторых случаях даже опытного web-разработчика.

Навигация по статье:

Я хочу вам показать несколько способов выравнивания по центру <div>, как по вертикали, так и по горизонтали.

Выравнивание <div> по центру с помощью margin по горизонтали

Первый, и самый правильный, на мой взгляд, способ выравнивания блока по центру заключается в использовании CSS-свойства margin со значением auto.

HTML:

Выравнивание отступами

CSS:

.child-block2{ display:block; /*Делаем блочный элемент*/ margin:auto;/*Задаем автоматический внешний отступ*/ width:50%; }

.child-block2{

display:block; /*Делаем блочный элемент*/

margin:auto;/*Задаем автоматический внешний отступ*/

width:50%;

}

Вот, что получилось:

Выравнивание по центру div

Он имеет некоторые особенности:

  1. 1.Данное свойство работает только для блочных элементов. То есть для выравниваемого блока должен быть присвоен display:block; (обычно оно стоит у блока <div> по умолчанию)
  2. 2.Данное свойство так же не сработает для блока, у которого задано абсолютное позиционирование (position:absolute) или обтекание (float:left или float:right).

Выравнивание <div> по центру с помощью text-align по горизонтали

Следующий способ выравнивания по центру <div> заключается в использовании CSS-свойства text-align со значением center

. Данное свойство предназначено для горизонтального выравнивания текста.

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

Данный вариант не сработает для блока с абсолютным позиционированием (position:absolute;) или если для блока задано обтекание (float:left или float:right).

Пример использования:

HTML:

Текстовое выравнивание

CSS:

.parent-block1{ text-align:center; /*Выравнивание по центру */ } .child-block1{ width:50%; display:inline; /*Делаем строчный элемент*/ }

.parent-block1{

text-align:center; /*Выравнивание по центру */

}

 

.child-block1{

width:50%;

display:inline; /*Делаем строчный элемент*/

}

Вот, что у нас получилось:

Выравнивание div по центру

Выравнивание <div> по центру с помощью vertical-align по вертикали

Первые два варианта позволяют нам выровнять <div> по центру. А как нам быть, если нам нужно выровнять элемент по вертикали? В этом случае мы можем воспользоваться свойством vertical-align со значением middle.

Особенности использования:

  1. 1.Данное свойство работает только для табличных элементов. Соответственно выравниваемый элемент должен находиться в ячейке таблицы. Или же он должен находиться в родительском блоке, которому присвоено свойство display:table-cell;, а данный родительский блок должен находится в блоке со значением display:table;

    HTML:

    Выравнивание в таблице

    CSS:

    .parent-block3{ display:table; } .child-block3{ display:table-cell; vertical-align:middle; } .sub-child-block{ width:50%; }

    .parent-block3{

    display:table;

    }

     

    .child-block3{

    display:table-cell;

    vertical-align:middle;

    }

     

    .sub-child-block{

    width:50%;

    }

    Результат:

    Выравнивание div по центру по вертикали

  2. 2.В случае, если для выравниваемого элемента задано абсолютное позиционирование, то <div> будет выровнен по верхней границе блока: Выравнивание с position:absolute;

Абсолютное выравнивание <div> по центру

Теперь, зная как выровнять <div> по вертикали и по горизонтали, мы можем совместить два способа выравнивания и добиться идеального расположения блока по центру.

Для того, чтобы этого добиться, нам нужно присвоить блоку свойство margin со значением auto, и расположить его в блоке со CSS свойством display:table-cell;, как это было показано в предыдущем варианте.

HTML:

Абсолютное выравнивание по центру

CSS:

.parent-block4{ width:100%; height:200px; display:table; /*делаем родительский блок таблицей*/ border:5px solid green; margin-top:50px; } .child-block4{ display:table-cell; /*делаем блок ячейкой таблицы*/ vertical-align:middle; /*задаём выравнивание по вертикали*/ border:5px solid blue; width:350px; height:30px; font-size:25px; color:#000; } .sub-child-block1{ width:350px; height:50px; border:3px solid orange; margin:auto; /*задаём выравнивание по горизонтали*/ }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

.parent-block4{

width:100%;

height:200px;

display:table; /*делаем родительский блок таблицей*/

border:5px solid green;

margin-top:50px;

}

 

.child-block4{

display:table-cell; /*делаем блок ячейкой таблицы*/

vertical-align:middle; /*задаём  выравнивание по вертикали*/

border:5px solid blue;

width:350px;

height:30px;

font-size:25px;

color:#000;

}

 

.sub-child-block1{

width:350px;

height:50px;

border:3px solid orange;

margin:auto; /*задаём  выравнивание по горизонтали*/

}

Результат:

Абсолютное выравнивание div по центру

Как видите, наш блок расположен идеально по центру, как по вертикали, так и по горизонтали. На сегодняшний день это единственный, известный мне способ, позволяющий добиться такого результата. Если вы знаете еще какой-нибудь способ, как можно сделать абсолютное выравнивание по центру <div>, обязательно напишите об этом в комментариях.

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

Для этого нам нужно сделать <div> блочным элементом и задать ему следующее выравнивание:

.m-align-block{
margin:10vh auto;
}

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

Во что получится:

Выравнивание div по центру с помощью margin

Надеюсь, моя статья поможет вам разобраться с выравниванием <div> по центру и у вас больше не возникнет с этим проблем. Обязательно добавьте эту статью к себе в закладки и поделитесь ею в социальных сетях с друзьями.

А на этом у меня сегодня все. До встречи в следующих статьях!

С уважением Юлия Гусарь

Как выровнять div по центру в HTML — Примеры

Ранее были показаны способы вертикального выравнивания, теперь остановимся на горизонтальном.

text-align: center;

Свойство CSS text-align выравнивает содержимое тега и принимает значения

text-align: center;
по центру		text-align: justify; — по ширине, когда браузер добавляет пробелы между словами, чтобы не было отступов с краёв. text-align: justify; — по ширине выравнивается последняя или единственная строка
text-align: left;
по левому краю		text-align: right;
по правому краю

Если указать text-align: center для встроенного элемента [занимаемого только ширину содержимого], то ничего не произойдёт, поскольку тег не может себя двигать:
<span>текст</span>
текст

Если для блочного [занимаемого всю доступную ширину], то содержимое элемента переместиться в центр

<div>текст</div>

текст


В качестве содержимого может выступать и другой тег.
<div>
  <span>встроенный элемент <br /> в две строки</span>
</div>

встроенный элемент
в две строки


Помог при выравнивании модального окна на CSS:
<div>
  <div>обтекаемый <br /> блочный элемент</div>
</div>

обтекаемый
блочный элемент


А вот блочный тег как и при display: table никак не хочет становиться по середине, перемещается лишь его текст
<div>
  <div>блочный элемент <br /> фиксированной ширины</div>
</div>

блочный элемент
фиксированной ширины

margin: 0 auto;

Свойство margin решает проблему

<div>
  <div>блочный элемент <br /> определённой ширины</div>
</div>

блочный элемент
определённой ширины


Чтобы выровнять картинку по центру, нужно прописать, что она стала блочной без указания её width
<img src="URL_изо"/>

width можно не рассчитывать и при display: table

<div>
  <div>блочная <br /> таблица</div>
</div>

блочная
таблица

float

float не имеет значения center

float: left;
обтекание слева

float: right;
обтекание справа

Для старых браузеров, чтобы выравнять блок, не имеющий фиксированной ширины, можно воспользоваться методом, описанным тут [Студия Артемия Лебедева] http://nocode.in/aligning-text-smartly-in-css/

Как выровнять блок по центру контейнера с помощью CSS

Наш постоянный читатель, и пользователь WordPress по совместительству, интересуется — как разместить блок по центру контейнера или страницы? И здесь имеется ввиду произвольный код, включая, но не ограничиваясь текстовым контентом. Например, это могут быть социальные виджеты или рекламный баннер, который следовало бы поместить по центру заданной области.

Как выровнять блок по центру контейнера с помощью CSSКак выровнять блок по центру контейнера с помощью CSS

Итак, если для текста внутри контейнера достаточно указать CSS-параметры:

text-align: center;

То например для картинки, можно использовать CSS-класс:

class=”aligncenter ”

который заведён в системе по умолчанию.

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

<center>
//ваш_код_блока
</center>

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

Если же блок заключён в теги «div» или ему подобные, то можно применить CSS-параметр внешнего отступа «margin». Укажите его для текущего стиля или имеющегося CSS-класса:

margin: 0 auto;

При этих значениях «margin» имеет нулевые отступы сверху и снизу, и равноудалён с боков. Но рекомендуем дополнить ещё одним атрибутом:

clear: both;

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

Таким образом, можно поместить любой блок по центру страницы. Если Вы не имеете навыка редактирования HTML кода, то по возможности проверяйте код на валидность. А возникшие вопросы по теме оставляйте в форме комментариев ниже.