Задача

Есть навигация (список ul). Каждый элемент списка (li) — блочный. Количество элементов навигации заранее не известно. Список в виде строки (li имеют свойство float: left/right), для того чтоб навигация была в одну строку. Нужно выровнять эту навигацию по середине родителя



Имеем следующий HTML:

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

и CSS:

.parent {
 width: 100%;
 text-align: center; /*пытаемся выровнять содержимое по центру */
 padding: 20px 0;
 background: #6699FF; /* для наглядности обозначаем родителя */
 float: left; /* чтоб высота родителя была с учетом плавающих потомков */
}
ul {
 list-style: none;
 font-size: 12px;
 margin: 0 auto; 
 padding: 0;
}
li {
 float: left; /* выстраиваем блочные элементы в ряд */
 margin-right: 4px;
 width: 23px;
 height: 19px;
 overflow: hidden;
 text-align: center;
 color: #fff;
 font-weight: bold;
 position: relative; /* для удобного размещения ссылки внутри */
 background:url(images/testFonNeactiv.png); /* фоновая картинка текущей страницы*/
 cursor: default;
 padding-top: 3px;
}
li a {
 color: #fff;
 text-decoration: none;
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 background:url(images/testFonActiv.png);
 text-align: center;
 width: 23px;
 height: 22px;
 padding-top: 3px;
} 

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

Решение

Для решения этой проблемы используем конструкцию:

<div class="parent">
<span><!--или любой другой элемент уровня inline (строчный)-->
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</span>
</div> 

CSS:

.parent {
 width: 100%; /* ширина нужна, только если блок плавающий (float) */
 text-align: center; /* обязательно делаем выравнивание по центру */
 float: left; /* в данном примере float нужен чтобы высота блока была с учетом плавающего содержимого */
 padding: 20px 0;
 background: #6699FF;
}
ul {
 display: table; /* элемент типа таблицы имеет ширину, зависящую от содержимого */
 width: auto; /* для уверенности что ширина будет зависеть от содержимого*/
 margin: 0 auto; /* устанавливаем отступ слева и справа в auto */
 list-style: none;
 font-size: 12px;
 padding: 0;
}
* html .parent span {/*хак для IE6, который не понимает display: table*/
 display: inline-block;
}
*:first-child+html .parent span {/*хак для IE7, который не понимает display: table */
 display: inline-block;
}
li {
 float: left;
 margin-right: 4px;
 width: 23px;
 height: 19px;
 overflow: hidden;
 text-align: center;
 color: #fff;
 font-weight: bold;
 position: relative;
 background:url(images/testFonNeactiv.png);
 cursor: default;
 padding-top: 3px;
}
* html li {
 height: 22px;
}
li a {
 color: #fff;
 text-decoration: none;
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 background:url(images/testFonActiv.png);
 text-align: center;
 width: 23px;
 height: 22px;
 padding-top: 3px;
}

Результат. Проверено в:
IE 6-8
Firefox 2-3
Opera 9.5
Chrome 1
Safari 3.1

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

HTML код не пройдет проверку корректности (валидацию), т.к. элементы уровня inline (строчные) не могут содержать элементы уровня блок (блочные). Заменить в этом коде <span> на блочный элемент (например <div>) не получится — в IE навигация останется прижата влево.

Альтернативное решение (валидный код)

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

HTML:

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

CSS:

.parent {
 width: 100%;
 text-align: center;
 padding: 20px 0;
 background: #6699FF;
}
span {
 font-size: 12px;
 margin: 0 auto;
 padding: 0;
 width: auto;
 display: table;
}
* html .parent span {
 display: inline-block;
}
*:first-child+html .parent span {
 display: inline-block;
} a, b {
 float: left;
 margin-right: 4px;
 width: 23px;
 height: 19px;
 overflow: hidden;
 text-align: center;
 color: #fff;
 font-weight: bold;
 background:url(images/testFonActiv.png);
 padding-top: 3px;
 display: inline;
}
* html a, * html b {
 height: 22px;
}
b {
 background:url(images/testFonNeactiv.png);
 cursor: default;
} 

Результат. Проверено в:
IE 6-8
Firefox 2-3
Opera 9.5
Chrome 1
Safari 3.1

Заметка

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

Решение без дополнительных элементов с валидным HTML

Это решение не требует дополнительных элементов, является семантичным и оставляет программистам чистый, валидный HTML код. Решение построено на использовании CSS свойства display:inline-block. Навигация реализована списком:
HTML

	<div class="parent">
	    <ul>
	        <li><a href="#">1</a></li>
	        <li><a href="#">2</a></li>
	        <li><a href="#">3</a></li>
	        <li>4</li>
	        <li><a href="#">5</a></li>
	        <li><a href="#">6</a></li>
	    </ul>
	</div>

CSS

	.parent {
	    text-align: center;/*все строчные элементы будут выравниваться по центру*/
	}
	ul {
	    display: inline-block; /*превращаем элемент в строчный блок*/
	    //display: inline; /*для IE6-7 превращаем элемент в строчный*/
	    zoom: 1; /*присваиваем ему layout*/
	    font-size: 12px;/*устанавливаем размер шрифта*/
	}
	li {
	    float: left;/*делаем блок плавающим*/
	    display: inline;/*убираем двойные отступы у плавающих блоков в IE6*/
	    margin-right: 4px;
	    width: 23px;
	    height: 22px;
	    overflow: hidden;
	    text-align: center;/*для того, чтобы центрировать надписи в элементах списка по горизонтали*/
	    color: #fff;
	    font-weight: bold;
	    background: url(/path-to/nvigatsiya-def.gif) no-repeat;
	    cursor: default;/*для активной страницы*/
	    line-height: 22px;/*для того, чтобы центрировать надписи в элементах списка по вертикали*/
	}
	li a {
	    color: #fff;
	    text-decoration: none;
	    display: block;
	    width: 23px;
	    height: 22px;
	    background: url(/path-to/nvigatsiya-href.gif) no-repeat;
	}

Как обычно, невалидный zoom и хак для IE прячем с помощью условных комментариев.

Проверено в:
IE 6-8
Firefox 3.0+
Opera 9.5+
Safari 3
Chrome 5

Добавлено: 16 Августа 2013 12:16:12 Добавил: Андрей Ковальчук Нравится 0

Добавить