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

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

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

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

HTML

<div class="navigation">
	<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. Однако, если прогоним наш код через браузер, то убедимся, что традиционное центрование не срабатывает. Это происходит из-за того, что ширина блока четко не определена.

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

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

HTML

<div class="navigation">
	<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 class="navigation">
	<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 class="navigation">
	<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 нужно скрывать через условные комментарии, чтобы не нарушить валидацию кода.

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