Выравнивание по центру блока css: Центрирование горизонтальное и вертикальное

по центру, по вертикали, выравнивание текста

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

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

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

<div id = «wrapper»>
<div id = «header»></div>
</div>

Предположим, что это шапка сайта. Она не тянется на всю ширину окна и нам надо ее отцентрировать. Пишем так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

#header{
width/max-width: 800px;
margin: 0 auto;
}

Нам нужно указать точную или максимальную ширину, после чего записать ключевое свойство – margin: 0 auto. Оно задает внешние отступы нашей шапке, первое значение определяет отступы сверху и снизу, а второе – справа и слева. Значение auto дает команду браузеру автоматически рассчитать отступы с обеих сторон так, чтобы элемент был ровно по центру родительского. Удобно!

Выравнивание текста

Это тоже очень простой прием. Для выравнивания всех строчных элементов можно использовать свойство text-align и его значения: left, right, center. Последнее центрирует текст, что нам и нужно. Таким же образом можно выровнять даже картинку, потому что она тоже по умолчанию является строчным элементом.

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

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

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

div{
background: #ccc;
padding: 30px 0;
}

Фон просто для того, чтобы визуально видеть края, а также внутренние отступы. Теперь высоту блока составляют два этих отступа и сама строка, а выглядит все это так:

Определить для блока line-height. Мне кажется, это более правильный способ, если вам надо выровнять одну строчку текста. При нем вы можете записать высоту по нормальному, с помощью свойсва height. После этого ему же нужно задать высоту строки, такую же, как и высота блока в целом.

div{
height: 60px;
line-height: 60px;
}

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Преобразовать блок в ячейку таблицы. Суть этого метода в том, что для ячейки таблицы действует свойство vertical-align: middle, которое центрирует элемент по вертикали. Соответственно, в этом случае блоку нужно задать следующее:

div{
display: table-cell;
vertical-align: middle;
}

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

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

Задать отступы в процентах. Если вы знаете высоту родительского элемента и помещаете в него еще один блочный элемент, то отцентрировать его можно с помощью процентных отступов. Например, родитель имеет высоту 600 пикселей. Вы помещаете в него блок, который имеет высоту 300 пикселей. Сколько вам нужно отступить сверху и снизу, чтобы отцентрировать его? По 150 пикселей, а это 25% от высоты родителя.

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

Вставить элемент в ячейку таблицы. Опять же, если мы преобразуем родительский элемент в ячейку таблицы, то вставленный в него блок автоматом отцентрируется по вертикали. Для этого родителю всего лишь нужно задать vertical-align: middle.

А если вдобавок к этому записать еще и margin: 0 auto, то элемент и по горизонтали станет в центр!

Использовать абсолютное позиционирование. Об этом способе мало кто знает. Нужно вставить в css такой код:

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;

Его нужно дописать к стилям элемента, который нужно отцентрировать. Если вы сейчас обновите страницу, то он будет выровнен по центру страницы, а нам надо сделать это относительно родительского блока. Для этого родительскому нужно задать position: relative и тогда отсчет координат будет вестись не от края окна, а от родительского контейнера.

Использовать флексбокс. Самый современный метод! Для этого контейнеру нужно записать в стили свойство display: flex, а его вложенному блоку – margin: auto. Элемент будет выровнен по центру, причем и по горизонтали, и по вертикали.

Если вам нужно выравнивание только по вертикали, то можно записать, например, так: margin: auto 0.

Как видим, в css выровнять текст по вертикали в блоке можно, причем не одним способом. Другое дело, что одного единственно правильного и оптимального решения нет, так что придется подстраиваться и в каждом конкретном случае делать по-разному.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Горизонтальное и вертикальное выравнивание элементов. Выравнивание по центру: CSS-верстка

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

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

, является float.
Синтаксис свойства:
float: left | right | none | inherit
,
Где:

• left
  – выравнивание элемента по левому краю экрана. Обтекание остальными элементами происходит справа;
• right
  – выравнивание справа, обтекание остальными элементами – слева;
• none
  – обтекание не допускается;
• inherit
  – наследование значения родительского элемента.

Рассмотрим облегченный пример позиционирования блоков div
с помощью этого свойства:

Теперь постараемся с помощью этого же свойства расположить третий div
по центру страницы. Но, к сожалению, у float
нет значения center
. А при задании новому блоку значения выравнивания вправо или влево он сдвигается в указанную сторону. Поэтому остается лишь всем трем блокам задать float: left
:

Но и это не является оптимальным вариантом. При уменьшении окна все слои выстраиваются в один ряд по вертикали, а при увеличении размеров – прилипают к левому краю окна. Поэтому нужен более совершенный способ выравнивание div
по центру.

Центрирование слоев

В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется с помощью задания свойствам margin
нулевого значения отступам от верхнего края и auto
по бокам (margin: 0 auto
):

Этот же пример показывает, как можно отцентровать div
по горизонтали. А если немного отредактировать приведенный выше код, то можно добиться вертикального выравнивания блоков. Для этого нужно лишь изменить длину слоя-контейнера (уменьшить его
). То есть после редактирования его css
класс должен выглядеть вот так:

После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div
по центру по вертикали:

В следующем примере для центрирования слоев внутри контейнера мы использовали ряд новых свойств css
:

Краткое описание свойств css
и их значений, которые мы использовали в данном примере для центрирования div
внутри div
:

• display: inline-block
  – выравнивает блочный элемент в строку и обеспечивает его обтекание другим элементом;
• vertical-align: middle
  – выравнивает элемент посредине относительно родительского;
• margin-left
  – устанавливает отступ слева.

Как из слоя сделать ссылку

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

Ссылка на наш сайт

В данном примере с помощью строки display: block
мы задали ссылке значение блочного элемента. А чтобы вся высота блока div
стала ссылкой, установили height
: 100%.

Скрытие и отображение блочных элементов

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

Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы «впихнуть
» еще один рекламный баннер. И тут уж выравниванием div
по центру страницы никак не отделаешься!

Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:

Это волшебная кнопка. Нажатие на нее скроет или отобразит скрывающийся блок.

Здравствуйте! Продолжаем осваивать основы языка HTML. Посмотрим, что нужно писать, чтобы выровнять текст по центру, ширине или краям.

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

Способ 1 — прямая работа c HTML

На самом деле все достаточно просто. Смотрите пример ниже.

Выравнивание абзаца по центру.

Если требуется сдвинуть текстовые фрагменты иным образом, то вместо параметра «center» прописываем следующие значения:

• justify – выравнивание текста по ширине страницы;
• right – по правому краю;
• left — по левому.

По аналогии можно сдвинуть контент, который находится в заголовках (h2, h3), контейнере (div).

Способ 2 и 3 — использование стилей

Конструкцию представленную выше можно слегка трансформировать. Эффект будет таким же. Для этого нужно прописать представленный ниже код.

Текстовый блок.

В таком виде код прописывается непосредственно в HTML для выравнивания текстового контента по центру.

Есть еще альтернативный вариант добиться результата. Нужно будет проделать пару действий.

Шаг 1. В основном коде написать

Текстовый материал.

Шаг 2. В подключаемом файле CSS вписать следующий код:

Rovno {text-align:center;}

Отмечу, что слово «rovno» это все лишь название класса, который можно назвать и по-другому. Это остается на усмотрение программиста.

По аналогии в HTML можно запросто сделать текст по центру, ширине, а также выровнять по правому или левому краю страницы. Как видите, есть далеко не один вариант достичь цели.

Всего несколько вопросов:

• Делаете информационный некомерческий проект?
• Хотите, чтобы сайт хорошо продвигался в поисковых системах?
• Желаете получать доход в сети?

Если все ответы положительные, то просто посмотрите на о комплексном подходе к развитию сайта. Информация окажется особенно полезной, если он работает на CMS WordPress.

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

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

Впереди опубликую еще не мало реально полезной информации. Оставайтесь на связи. При желании можете подписаться на обновления Workip на e-mail. Форма подписки расположена ниже.

Казалось бы, нет ничего сложного, чтобы установить картинку или текст в центре окна браузера. Используем тег CENTER и все становится на то место, куда мы и задумывали. Однако не все так просто. Существует три способа выравнивания по центру, каждый из них имеет свои особенности и отличия в разных браузерах.

Один из самых простых и удобных тегов – CENTER предназначен для выравнивания блока текста. С помощью этого тега также можно центрировать рисунки и таблицы. Исключение составляют элементы или для которых выравнивание задается свойствами тега IMG. Так, если поместить элемент внутри тега CENTER, рисунок окажется выровненным по правому краю.

Пример 4.1. Центрирование с помощью тега CENTER

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

Формально CENTER должен использоваться только как параметр других блочных тегов (P, PRE и другие). Однако в браузере Netscape Navigator 2.0 CENTER был введен как самостоятельный тег. Это дополнение было призвано убрать лишний вертикальный отступ, который появляется при использовании блочных тегов. Если вместо тега CENTER текст поместить внутрь параграфа (

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

CENTER не входит в спецификацию HTML. В «официальном» HTML форматирование, такое как выравнивание текста должно производится через атрибуты тегов (например,

) или с использованием стилей. Тем не менее, этот тег обрел право на существование. Однако после опубликования спецификации HTML 4 W3 Консорциум рекомендовал воздержаться от использования тега CENTER, а вместо него использовать элемент

…

, как показано в примере 4.2.

Пример 4.2. Центрирование с помощью тега DIV

Выравнивание текста по центру с помощью тега DIV

Еще один способ центрирования заключается в использовании стилей. Стили представляют собой инструкции, которые позволяют управлять атрибутами форматирования как шрифт, цвет, выравнивание и др. Пример переопределения тега P для центрирования текста.

Пример 4.3. Центрирование с помощью стилей

Теперь, когда вы будете использовать тег P с вышеуказанным
стилем, текст параграфа будет выровнен по центру окна браузера

5 способов выравнивание блоков div по центру при помощи CSS

Способов выравнивания блоков довольно много. Каждый выбирает для себя более привычный. Я опишу 5 способов, выбирайте наиболее подходящий. 

1.  Самый простой способ – с использованием стиля margin:10px auto 5px;
   Его можно применять для выравнивания одного блока. Два и более блока в этом случае будут располагаться вертикально.

   стиль:
   .blk1 { /* выравнивание блоков по центру */
                   margin:10px auto 5px; 

                /* эти стили на выравнивание не влияют */
                width: 400px;
                background-color:#CCC;
                border: 1px solid #999;
                padding: 20px;
}
Код HTML-смтраницы:

<div> Содержание блока 1. Текст, текст, … </div>
<div> Содержание блока 2. Текст, текст, … </div>

2.  Процентный способ выравнивания. Его использовать можно тогда, когда ширина блока задана в процентах. Принцип в  том, что если ширина блока 60%, то на отступы слева и справа остается 40% (по 20% с каждой стороны). В этом случае можно для этих блоков применять стиль:

margin:5px 20% 10px 20%;

               width:60%;
Код страницы аналогичен предыдущему способу.

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

3. Смешанный способ выравнивания блока по центру:
   left: 50%;
   margin-left: -500px;
   position: absolute;
   Это не самый лучший, т.к. имеет ряд недостатков:  
   1. выравнивание получается не совсем по центру;
   2. при использовании двух и более блоков на странице виден только последний, т.к. стиль position: absolute;  (абсолютное позиционирование) ставит все блоки в одно место.

4. С использованием родительского блока. Метод предполагает использование одного дополнительного общего блока, внутри которого помещаются выравниваемые блоки.
   В этом случае HTML-код страницы:

<div>
                <div> Содержание блока 1. Текст, текст… </div>
                <div> Содержание блока 2. Текст, текст… </div>
               …  ниже дополнительные блоки (при необходимости)  …
                <div> Содержание блока 3. Текст, текст… </div>
                <div> Содержание блока 4. Текст, текст… </div>
                <div> Содержание блока 5. Текст, текст… </div>
</div>

Стили для этих блоков:

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

                /* эти стили на выравнивание не влияют       */
                margin: 5px;
                background-color:#CCC;
                width:400px;
                border: 1px solid #999;
                padding: 20px;
}

Если блоков в странице не много, т.е. они помещаются в одну строку, то выравнивание для них работает:

Главный недостаток — когда блоков много и они не помещаются в 1 ряд, то выравнивание блоков по центру перестает работать:
 

5. С использованием стиля text-align: center; в родительском блоке и стиля display: inline-block; в дочерних. Тогда HTML-код страницы:

<div>
                <div> Содержание блока 1. Текст, текст… </div>
                <div> Содержание блока 2. Текст, текст… </div>
               …  ниже дополнительные блоки (при необходимости)  …
                <div> Содержание блока 3. Текст, текст… </div>
                <div> Содержание блока 4. Текст, текст… </div>
                <div> Содержание блока 5. Текст, текст… </div>
</div>
Стили для этих блоков:

.dop-block {
                text-align: center;
}

.blk5 {
                display: inline-block;   

                /* дополнительный стиль для вытавнивания текста внутри блока  */

                text-align:left;                

             /* эти стили на выравнивание блоков не влияют         */
                margin: 5px;
                background-color:#CCC;
                width:400px;
                border: 1px solid #999;
                padding: 20px;

}

Страница в этом варианте будет выравнивать блоки даже если их общая длинна превышает ширину окна браузера:

Не все способы описаны. Если вы считаете, что есть еще более удобный способ, напишите.

Выравнивание по центру блока произвольной ширины

Немного отступлю от темы, к вопросу выравнивания. Выровнять по центру элемент с заданной шириной можно с помощью — margin. То есть задаем ширину и отступ, выглядит это примерно так.

.div{	
	width:250px; 
	margin:0 auto;
}

Если блок имеет ширину в процентах, то свойство auto уже не поможет, но это не страшно, нужно просто применить немного математики.

Например блок у нас имеет ширину 40% от родителя. Чтобы его выровнять, нам надо отступить равномерно от обеих краев. Если ширина родителя 100% — 40% ширины нашего блока, остается 60%, значит по 30% на каждую сторону. Значит задаем такие параметры в стилях:

.div{	
	width:40%; 
	margin-left:30%;
}

Но тут следует учесть, маленькое НО! Если вы зададите блоку padding, его ширина увеличится, и выравнивание будет неровным. Поэтому следует это учесть, задавая внутренний отступ — padding в процентах, а потом от отступа слева отнимать этипроценты:

.div{	
	width:40%; 
	padding:0 5%;
	margin-left:25%;
}

Ну или же прописать блоку параметр box-sizing:padding-box; — он применяется для изменения алгоритма расчета ширины и высоты элемента, то есть ширина останется 40%, не смотря на padding.

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

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

        <div>
            <div>Содержание блока</div>
        </div>

И стили. которые все и сделают.

.container {
    float: left;  
    position:relative;
    left: 50%;                
}
block {            
    position:relative;
    left: -50%;
    float: left;
}

Теперь все станет четко по центру, но есть опять маленькое НО! Если Вы будете применять данный метод при адаптивной верстке, то у Вас появится маленький глюк, при уменьшении ширины страницы, родитель блока, будет на пол своей ширины вылазить за весь контент. Поэтому всю эту конструкцию нужно заключить еще в один блок или тому блоку в котором они уже у Вас находятся, нужно добавить нужную ширину и свойство — overflow:hidden;, которое обрежет все, что будет вылазить за пределы. Ваш блок и останется в центре, но пустота справа исчезнет, при маленьком размере страницы.

На этом все, спасибо за внимание. 🙂

Горизонтальное выравнивание текста, картинок, блоков(div) по центру

В этой статье мы коснемся вопроса выравнивания по центру различных элементов html при помощи css свойств. 

Довольно часто появляется необходимость выровнять div по центру или выровнять его содержимое. Существует несколько способов это сделать. Некоторые способы подходят для выравнивания текста, картинок и другого, но не подходят для выравнивания блоков.

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

В этом случае все просто — для родительского элемента задаем свойство text-align со значением center. Такой способ выровнять текст по центру при помощи css самый простой и удобный. Для более глубокого понимания приведу пример. Важно осозновать, что в этом случае по центру у нас выравнивается только содержимое.

HTML-код:

<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<title>Страница</title>
		<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	</head>
	<body>
		<p>Какой-то текст, выравненный по центру для родительского элемента body</p>
		<img src="/images/1386.jpg" alt="Улыбка" />
	</body>
</html>

CSS-код:

body {text-align:center;} /*выравниваем содержимое body по центру*/

С самым простым — выравниванием текста и изображений при помощи css по центру страницы мы разобрались.

Теперь перейдем к способам выравнивания элементов вроде блочного типа(div, table). В этом случае мы будем выравнивать по центру не содержимое, а сами таблицы, блоки, абзацы.

Всего я предлагаю два варианта при помощи CSS: используя свойство margin и используя свойства position c left. Важно заметить, что ни один из этих способов не будет работать, если у вас не задана фиксированная ширина элемента, не важно в px, % или чем ещё.

Таким образом, первым делом решаем, в каких единицах и какая будет ширина элемента, который мы хотим выровнять по центру.

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

Для метода при помощи margin не важно, в процентах или пикселях вы задает эту ширину. Для центрирования по этому методу, вам нужно в качестве значений свойства margin поставить следующие 0 auto. Если более конкретно, то для боковых отступов значение должно быть auto, а для верхнего и нижнего можно задавать любые внешние отступы. Т.е. развернутый вариант значения выглядит так 0 auto 0 auto, либо так 10px auto 5% auto.

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

Это, пожалуй, наиболее универсальный и удобный способ, чтобы div был выровнен по центру или любой другой элемент.

Далее приводится пример выравнивания при помощи этого метода.

HTML-код:

<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<title>Страница</title>
		<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	</head>
	<body>
		<div>С другой стороны начало повседневной работы по формированию позиции обеспечивает широкому кругу (специалистов) участие в формировании соответствующий условий активизации. Повседневная практика показывает, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации. Не следует, однако забывать, что реализация намеченных плановых заданий играет важную роль в формировании существенных финансовых и административных условий. Разнообразный и богатый опыт рамки и место обучения кадров играет важную роль в формировании систем массового участия.</div>
		<div>С другой стороны начало повседневной работы по формированию позиции обеспечивает широкому кругу (специалистов) участие в формировании соответствующий условий активизации. Повседневная практика показывает, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации. Не следует, однако забывать, что реализация намеченных плановых заданий играет важную роль в формировании существенных финансовых и административных условий. Разнообразный и богатый опыт рамки и место обучения кадров играет важную роль в формировании систем массового участия.</div>
	</body>
</html>

CSS-код:

body {text-align:center;}
div {padding:10px; color:#FFFFFF;}
div.centr { 
	background:#003300; 
	width:300px; /*фиксированная ширина через пиксели*/
	margin:10px auto 0 auto; /*внешние отступы, выравнивающие блок по центру и отступая сверху на 10 px*/
}

div.centrall { 
	background:#990000; 
	width:30%; /*фиксированная ширина через проценты*/
	margin:2% auto 0 auto; /*внешние отступы, выравнивающие блок по центру и отступая сверху на 2%*/
	text-align:center;
}

Выравнивание по центру при помощи position и left

Такой вариант подойдет не для любого элемента.

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

Во-вторых, родительскому тэгу должно быть задано свойство position с значением relative/absolute/fixed, любым из перечисленных. 

Теперь нужно так же задать любое из этих значений свойства position для выравниваемого элемента. Потом взять 100 вычесть ширину этого элемента и поделить получившееся число на 2. Получившееся значение и будет тем, которое нужно указать для left (стоит отметить, что это свойство можно заменить на right, как обычно это не существенно). Благодаря таким свойствам нужный div или таблица будут размещены по центру родительского элемента.

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

Посмотрите сами, как это работает.

HTML-код:

<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<title>Страница</title>
		<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	</head>
	<body>
		<div>С другой стороны начало повседневной работы по формированию позиции обеспечивает широкому кругу (специалистов) участие в формировании соответствующий условий активизации. Повседневная практика показывает, что укрепление и развитие структуры позволяет оценить значение соответствующий условий активизации. Не следует, однако забывать, что реализация намеченных плановых заданий играет важную роль в формировании существенных финансовых и административных условий. Разнообразный и богатый опыт рамки и место обучения кадров играет важную роль в формировании систем массового участия.</div>
	</body>
</html>

CSS-код:

body {position:relative;}
div {padding:10px; color:#FFFFFF; position:relative;}

div.centrall { 
	background:#990000; 
	width:20%; /*фиксированная ширина через проценты*/
	text-align:center;
	left:40%; /*отступ от левого края родительского элемента*/
}

Выравнивание сайта по центру экрана

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

<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8" />
        <title>Главная страница</title>
        <style type ="text/css">
            body{
                margin: 0px; /* Убираем внешние отступы */
                padding: 0px; /* Убираем внутренние отступы */
            }

            #wrapper{
                position: absolute; /* Относительное позиционирование */
                border: 1px solid #000; /* Внешнея граница вокруг блока div */
                width: 1000px; /* Ширина блока div */
                min-height: 950px; /* Минимальная высота блока */
                margin-left: -500px; /* Внешний левый отступ. Отрицательное значение означает, что блок выходит за левого края браузера на 500px */
                left: 50%; /* Позиционирование относительно левого края окна браузера */
                background-color: #7AB8E9; /* Цвет фона для блока */
            }
        </style>
    </head>
    <body>
        <div >

        </div>
    </body>
</html>

У нас получилось страница, выровнена по центру окна браузера.

Разберем CSS код страницы

В первую очередь убрали внешние (margin) и внутренние(padding) отступы у блока body т.к. у каждого браузера изначально заданы разные значения этих свойств для блока body. Эти значения больше чем 0px, поэтому мы их убираем.

Создали блок div и задали ему идентификатор с именем wrapper. Этот блок и есть обертка для нашей страницы.

Для блока div задали абсолютное позиционирование на 50% относительно левого края окна браузера. Могли бы задать и фиксированное позиционирование (position:fixed;) она аналогична абсолютной позиционирований, но в данном случае не смогли бы прокручивать страницу вертикально, поэтому отказались от этого значения. Ширину страницы задали 1000px для того чтобы поместилась в разрешение экрана 1024. 24px оставили для полосы вертикальной прокрутки. В итоге страница вместе с полосой прокрутки занимает 1024px, что естественно подойдет для всех экранов, которые поддерживают это разрешение.

Задали отрицательное значение для внешнего отступа margin в размере -500px, это занимает половину из размера блока div. Это значение заставляет блока div двигаться в сторону левого края браузера, на расстояние 500px, половины из своей ширины. Смотрим, как это выглядит в браузере.

Для абсолютного позиционирования задали left:50%; что соответствует половину из ширины блока, для того что бы страница начала позиционирование с пол страницы. Это свойство вместе с отрицательным левым отступом, делают, что бы страница выравнивалась прямо по центру в любой разрешений экрана.

Если Вы не знакомы с отрицательными значениями свойства margin, то я вам рекомендую почитать статью Отрицательные значения внешних полей в CSS.

Вот, и все что я вам хотел рассказать о выравнивании страницы по центру окна браузера. Теперь вы знаете один из методов как решить данную проблему. Желаю вам больших успехов.

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

%next_previous_article%

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту [email protected]. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: %date%

CSS Центральное, горизонтальное и вертикальное выравнивание

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

Выравнивание текста

Текст внутри элементов уровня блока можно выровнять, правильно установив выравнивание текста.

  h2 {
    выравнивание текста: центр;
}
п {
    выравнивание текста: слева;
}  

См. Руководство по CSS-тексту, чтобы узнать больше о форматировании текста.

Выравнивание по центру с использованием свойства поля

Выравнивание по центру элемента уровня блока является одним из наиболее важных следствий свойства CSS margin . Например, контейнер

  div {
    ширина: 50%;
    маржа: 0 авто;
}  

  .up {
    позиция: абсолютная;
    верх: 0;
}
.вниз {
    позиция: абсолютная;
    внизу: 0;
}  

  div {
    ширина: 200 пикселей;
    плыть налево;
}  

  .container {
    плыть налево;
    фон: # f2f2f2;
}  

  .clearfix {
    ясно: оба;
}
/ * фрагмент HTML-кода * /
 
  

  .clearfix: после {
    содержание: ".";
    дисплей: блок;
    высота: 0;
    ясно: оба;
    видимость: скрыта;
}  

 .center {
    маржа слева: авто;
    маржа-право: авто;
    ширина: 50%;
    граница: сплошной зеленый цвет 3px;
    отступ: 10 пикселей;
}  

  .left {
    выравнивание текста: слева;
    граница: сплошной зеленый цвет 3px;
}
.верно {
    выравнивание текста: вправо;
    граница: сплошной зеленый цвет 3px;
}
.center {
    выравнивание текста: центр;
    граница: сплошной зеленый цвет 3px;
}  

  img {
    дисплей: блок;
    маржа: 0 авто;
    ширина: 50%;
}  

  .center {
    отступ: 80 пикселей 0;
    граница: сплошной зеленый цвет 3px;
}  

  .center {
    отступ: 80 пикселей 0;
    граница: сплошной зеленый цвет 3px;
    выравнивание текста: центр;
}  

 .center {
    высота строки: 200 пикселей;
    высота: 200 пикселей;
    граница: сплошной зеленый цвет 3px;
    выравнивание текста: центр;
}
 
/ * Если текст состоит из нескольких строк, добавьте следующее: * /
.center p {
    высота строки: 1,5;
    дисплей: встроенный блок;
    вертикальное выравнивание: по центру;
}  

  п {
  выравнивание текста: центр;
}  

  #mysection {
  дисплей: гибкий;
  justify-content: center;
}  

  section {
  маржа: 0 авто;
  ширина: 50%;
}  

  section {
  margin-top: 0;
  нижнее поле: 0;
  маржа слева: авто;
  маржа-право: авто;
}  

  #mysection {
  дисплей: гибкий;
  align-items: center;
}  

  #mysection {
  дисплей: гибкий;
  align-items: center;
  justify-content: center;
}  

  кузов {
  дисплей: сетка;
  места-предметы: центр;
  высота: 100vh;
}  

 css  div {
  дисплей: гибкий;
}
  

 html  

  

    я центрирован по горизонтали!
  

  

 css  .container {
  дисплей: гибкий;
  justify-content: center;
}
  

 html  

  

    я центрирован по вертикали!
  

  

 css  .container {
  мин-высота: 100vh; // высота области просмотра браузера
  дисплей: гибкий;
  align-items: center;
}
  

 css  .container {
  мин-высота: 100vh;
  дисплей: гибкий;
  justify-content: center;
  align-items: center;
}
  

 css  .container {
  дисплей: гибкий;
  justify-content: пробел между;
}
  

  h2 {
  выравнивание текста: центр;
}  

  .центр-горизонтальный {
  маржа слева: авто;
  маржа-право: авто;
  ширина: 100 пикселей;
}  

  <раздел>
  
 Центрировать меня по вертикали