Css расположение по центру блока: Выравниваем блок по центру страницы / Хабр

Leave a Comment / Css / By /

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

Вы здесь

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

Дата:31.12.15 в 14:21

Раздел: 

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

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

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

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

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

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+

Оценок: 3 (средняя 5 из 5)

Оценка: 

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

CSS приемы

Понравилась статья? Расскажите о ней друзьям:

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

Почему мой блок div не центрируется? Честно — HTML и CSS — Форумы SitePoint

niadaniels40

#1

Я не понимаю этого, я обычно использую flexbox justify center align center or margin:0 auto , но это не сработает. поле не будет применяться слева. Почему я сделал это с собой на nye?

ниаданиелс40

#2

Наверное, я исправил.

Эрик_Дж

#3

Привет,

Не могли бы вы поделиться своим решением?

ниаданиелс40

#4

да. Не могли бы вы покритиковать то, что у меня есть на данный момент, например, мою разметку и то, как я это делаю? https://codepen.io/lilliongoddess/pen/KKgQrYe

Эрик_Дж

#5

Похоже, вы решили проблему.

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

ниаданиэльс40:

…и как я это делаю?

Боюсь, у меня нет мнения. Слишком много обстоятельств зависит от того, как вы делаете что-то.

2 лайка

PaulOB

#6

ниаданиэльс40:

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

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

Высота: 28 см в обертке генератора вызывает беспокойство. Если пользователь изменит размер своего текста, текст вырвется наружу.

Снимок экрана 2021-01-02 с разрешением 13.46.59952×521 57,9 КБ

Вышеупомянутый пример является крайним, но если бы вместо этого вы просто использовали min-height:28em (предупреждение о магическом числе), то не было бы вообще никаких проблем . Как правило, избегайте фиксированной высоты элементов, содержащих текстовое содержимое.

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

 .pagewrap {
  максимальная ширина: 1625 пикселей;
  /*ширина: 100%; по умолчанию используется автоматический режим, и отступы не влияют на ширину*/
  мин-высота: 60вх;
  поле: 0 авто;
}

Мин-высота: 60vh также вызывает беспокойство, так как кажется еще одним магическим числом и в любом случае на самом деле не вступает в игру.

3 лайка

niadaniels40

#7

я удалил это переполнение, я скопировал его из другого проекта, который я сделал. и благодарю вас! У меня есть один вопрос!! Я думал, что минимальная высота должна использоваться для каждого раздела? где-то на моем пути обучения все запуталось, лол, поэтому я очень ценю помощь, которую вы все мне оказали.

2 лайка

PaulOB

#8

ниаданиэльс40:

и спасибо! У меня есть один вопрос!!

Нет, минимальная высота нужна только тогда, когда вам нужна минимальная высота.

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

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

1 Нравится

система закрыто

#9

Эта тема была автоматически закрыта через 91 день после последнего ответа. Новые ответы больше не допускаются.

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

05 мая 2021 — Эдгар HTML css

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

Как вы, возможно, знаете, теги привязки имеют встроенное свойство отображения. Таким образом, центрирование гиперссылки не так просто, как добавление «text-align: center» к тегам привязки.

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

 Случайная ссылка

Выглядит так:

Случайная ссылка

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

1) Центрирование ссылок путем размещения их внутри блока div, выровненного по тексту.

Поместите ссылку HTML внутри блока div. В стилях для div примените text-align:center и сделайте тег привязки встроенным блоком (display:inline-block).

т.е.

 <дел>
    Случайная ссылка

Результаты:

Случайная ссылка

Поместите ссылку внутри div. В стилях примените к div «display:flex» и «justify-content:center».

 <дел>
    Случайная ссылка

Результаты:

Случайная ссылка

Очень похоже на flex, поместите ссылку внутри div. В стилях примените к div «display:grid» и «justify-content:center».

 <дел>
    Случайная ссылка

Результаты:

Случайная ссылка

Чтобы центрировать гиперссылку по вертикали и горизонтали, вы можете продолжать использовать flex или grid.

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

Flex

Для центрирования тега привязки с помощью flex. Добавьте следующие свойства в div: display:flex; выровнять содержание: центр; выровнять-элементы: по центру. Код будет выглядеть так:

Результат:

Случайная ссылка

Сетка

Точно так же, чтобы центрировать ссылку с сеткой, добавьте следующие свойства в div: display:grid; выровнять содержание: центр; выровнять-элементы: по центру. код будет выглядеть так:

 <дел>
    Случайная ссылка