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

Выравнивание содержимого по горизонтали, которое имеет свойство float, можно сделать очень легко и кроме того полностью кроссбраузерно (работает в Opera 8+, Firefox 3+, IE 5.5+).

Пример выравнивания div-блока

Чтобы выравнять блок со свойством float или несколько расположенных в ряд блоков, необходим еще один внешний блок. Внешнему блоку и внутренним блокам назначается position: absolute; и float: left;, внешнему назначить left: 50%;, а внутренним блокам right: 50%;. Для использования float: right; нужно назначить внешнему назначитьright: 50%;, а внутренним блокам left: 50%;. Рекомендую очищать float, размещая после выравненных по центру элементов блок со свойством clear: both;.

Таким образом можно добиться такого центрирования:

Границу зеленого цвета имеет внутренний блок с id = block-inner, прерывистую красную границу имеет внешний блок с id = block.

HTML-код примера изображенного ниже выглядит так:

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

CSS-код примера изображенного ниже выглядит так:

#block {
  position: relative;
  float: left;
  left: 50%;
  border: 1px dashed #a00;
}

#block-inner {
  position: relative;
  float: left;
  right: 50%;
  border: 2px solid #0a0;
  padding: 10px;
}

#page {
  overflow: hidden;
}

 

Пример выравнивания пунктов меню

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

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

Например можно выравнять меню так:

Границу зеленого цвета имеют пункты li списка ul, прерывистую красную границу имеет список ul.

HTML-код примера изображенного ниже выглядит так:

<div>
  <ul>
    <li><a href="#">Выравненный пункт 1</a></li>
    <li><a href="#">Выравненный пункт 2</a></li>
    <li><a href="#">Выравненный пункт 3</a></li>
    <li><a href="#">Выравненный пункт 4</a></li>
    <li><a href="#">Выравненный пункт 5</a></li>
  </ul>
</div>

CSS-код примера изображенного ниже выглядит так:

#menu {
  position: relative;
  float: left;
  left: 50%;
  border: 1px dashed #a00;
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  position: relative;
  float: left;
  right: 50%;
  border: 2px solid #0a0;
  padding: 10px;
}

#page {
  overflow: hidden;
}

Так что все довольно просто. Желаю успехов в освоении новых методов.

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

Вы здесь

Главная → Блог → CSS → Выравнивание навигации по страницам

Раздел: 

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

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

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

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

HTML

<div>
	<ul>
		<li>1</li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
	</ul>
</div>

CSS

. navigation {
	width: 100%;
	text-align: center; /*пробуем центровать навигацию*/
	padding: 20px 0;
	background: #63beef;
	float: left;
}
ul {
	list-style: none;
	font-size: 12px;
	margin: 0 auto;
	padding: 0;
}
li {
	float: left; /*блочные элементы в 1 строку*/
	margin-right: 4px;
	width: 23px;
	height: 19px;
	overflow: hidden;
	text-align: center;
	color: #63beef;
	font-weight: bold;
	position: relative;
	background:#ddf3ff;
	cursor: default;
	padding-top: 3px;
	border-radius:50%;
}
li a {
	color: #63beef;
	text-decoration: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background:#fff;
	text-align: center;
	width: 23px;
	height: 22px;
	padding-top: 3px;
}

В примере этого кода мы попробовали выровнять блок с навигацией стандартным способом, используя для дочернего элемента свойство text-align. Однако, если прогоним наш код через браузер, то убедимся, что традиционное центрование не срабатывает. Это происходит из-за того, что ширина блока четко не определена.

поковка для ножа заготовка для ножа кованая, lohmann lo r.

Решение возникшей проблемы

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

HTML

<div>
	<span>
		<ul>
			<li>1</li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
	</span>
</div>

CSS

.navigation {
	width: 100%;
	text-align: center;
	padding: 20px 0;
	background: #63beef;
	float: left;
}
ul {
	display: table; /* это определит
 зависимость ширины от содержимого */
	width: auto;
	margin: 0 auto;
	list-style: none;
	font-size: 12px;
	padding: 0;
}
* html .navigation span {/*хак для IE*/
	display: inline-block;
}
*:first-child+html .navigation span {/*хак для IE*/
	display: inline-block;
}
li {
	float: left; /*блочные элементы в 1 строку*/
	margin-right: 4px;
	width: 23px;
	height: 19px;
	overflow: hidden;
	text-align: center;
	color: #63beef;
	font-weight: bold;
	position: relative;
	background:#ddf3ff;
	cursor: default;
	padding-top: 3px;
	border-radius:50%;
}
li a {
	color: #63beef;
	text-decoration: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background:#fff;
	text-align: center;
	width: 23px;
	height: 22px;
	padding-top: 3px;
}

По итогу получаем навигацию по центру страницы, как показано на рисунке

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

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

IE не переопределит навигацию в центре страницы в таком случае.

Валидное решение

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

Профессиональная помощь в приемке квартиры доступная.

HTML

<div>
	<span>
		<ul>
			<b>1</b>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
		</ul>
	</span>
</div>

CSS

.
 
 navigation {
	width: 100%;
	text-align: center;
	padding: 20px 0;
	background: #63beef;
}
span {
	display: table;
	width: auto;
	margin: 0 auto;
	font-size: 12px;
	padding: 0;
}
* html .navigation span {/*хак для IE*/
	display: inline-block;
}
*:first-child+html .navigation span {/*хак для IE*/
	display: inline-block;
}
a, b {
	float: left; /*блочные элементы в 1 строку*/
	margin-right: 4px;
	width: 23px;
	height: 19px;
	overflow: hidden;
	text-align: center;
	color: #63beef;
	font-weight: bold;
	position: relative;
	background:#ddf3ff;
	cursor: default;
	padding-top: 3px;
	border-radius:50%;
	display: inline;
	text-decoration:none;
}

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

Альтернативное решение без вспомогательных тегов и валидным кодом

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

Итак, это решение не нуждается в вспомогательных тегах для определения ориентации по центру. В тоже время код можно назвать семантичным и с валидацией тоже не возникает никаких проблем. Мы просто берем наш блочный не маркированный список и присваиваем ему свойство строчного элемента, воспользовавшись значением inline-block свойства display:

HTML

<div>
	<ul>
		<li>1</li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
	</ul>
</div>

CSS

.navigation {
	width: 100%;
	text-align: center;
	padding: 20px 0;
	background: #63beef;
}
ul {
	display: inline-block;
	//display: inline; /*для IE*/
    zoom: 1; /*присваиваем ему layout*/
	list-style: none;
	font-size: 12px;
	padding: 0;
}
li {
	float: left; /*блочные элементы в 1 строку*/
	display: inline;/*для IE*/
	margin-right: 4px;
	width: 23px;
	height: 23px;
	overflow: hidden;
	text-align: center;
	color: #63beef;
	font-weight: bold;
	background:#ddf3ff;
	cursor: default;
	border-radius:50%;
	line-height: 23px;
}
li a {
	color: #63beef;
	text-decoration: none;
	display:block;
	background:#fff;
	text-align: center;
	width: 23px;
	height: 23px;
}

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

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

В каких браузерах работает?

6.0+5.0+9.5+3.0+3.0+

Ключевые слова: 

CSS приемы

CSS база. Или что должен знать каждый верстальщик

Уровень сложности:

Средний

Еще интересное

html — Как центрировать — display:block/inline-block

спросил

Изменено 6 месяцев назад

Просмотрено 136 тысяч раз

При центрировании элементов в html и css я нахожу два подхода: либо применение к элементу:

 display:block;
поле:0 авто;

или используя:

 display:inline-block;
выравнивание текста: по центру; (на родительском элементе)

Мне всегда интересно, что лучше и почему. Спасибо!!

  • HTML
  • Блок
  • Центр
  • CSS

0

Блочные элементы всегда должны центрироваться с помощью

 .block {
    поле слева: авто;
    поле справа: авто;
    ширина: 600 пикселей;
}

, как указано w3c: http://www.w3.org/Style/Examples/007/center.en.html#block

 выравнивание текста: по центру;

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

Обновление

Вы также можете использовать дисплей : flex сейчас:

 .parent {
    дисплей: гибкий;
    выравнивание содержимого: по центру;
}
.блокировать {
    ширина: 200 пикселей;
}

2

Это классический и важный вопрос.

Элементы могут быть либо встроенными (это означает, что все они располагаются рядом друг с другом — как тег span), либо они могут быть блочными (что означает наложение стека друг на друга — как тег div).

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

Для всего, что является display: inline (например, тегом span) — только способ центрирования, если вы укажете text-align: center на родительском элементе. Это будет центрировать все display: inline внутри него, что position: static;

Отображение: встроенный блок представляет собой гибрид двух относительно новых (но поддерживается еще в ie7, если вы используете хак, упомянутый в другом ответе). С помощью встроенного блока вы получаете преимущества встроенного в том, что вы можете разместить кучу элементов рядом друг с другом и сделать их центрированными (подумайте о навигации, где все элементы навигации центрированы), но ТАКЖЕ каждый item использует преимущества некоторых вещей, которые вы получаете с display: block — наиболее важной из них является HEIGHT.

Представьте себе сценарий, в котором каждый элемент навигации имеет фоновое изображение высотой 80 пикселей — вы не можете сделать встроенный элемент высотой 80 — поэтому вам нужно сделать так, чтобы каждый элемент отображал: блок — только тогда вы можете дать это высота. Таким образом, чтобы они все отображались рядом друг с другом, вы должны их плавать. Проблема в том, что если вы их плаваете, вы не можете расположить их все по центру страницы, если вы не зададите фиксированную ширину для навигации и полей: auto THAT. Это означает, что навигация имеет фиксированную ширину — может быть, это нормально, но бывают случаи, когда навигация должна иметь динамические элементы, разную ширину для разных языков и т. д.

Введите дисплей: встроенный блок.

1

В этой ситуации лучше не придумаешь оба подхода сработают и оба исправятся. Только одно display:inline-block не работает в IE7 (если вы поддерживаете этот браузер) вам понадобится хак, чтобы заставить его работать

 display: inline-block;
* дисплей: встроенный;
масштаб: 1;

0

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Элемент центрального блока в элементе

спросил

Изменено 11 лет, 8 месяцев назад

Просмотрено 18 тысяч раз

Я пытаюсь центрировать блочный элемент (поле заголовка WordPress, включая изображение), но это не сработает. Я пробовал:

 .imagecenter {
   поле слева: авто;
   поле справа: авто;
   дисплей: блок;
}

Но это просто не сработает. Я также пробовал margin-left: auto; поле справа: авто; , но и это не сработает. Есть ли что-то, что я делаю неправильно? Это то, что мне следует делать в документации W3C.

В HTML это выглядит так (для уточнения):

 <дел>
........ разместить здесь ....
<дел>

Бла.
.........пост здесь......