Форум программистов
 
Регистрация на форуме тут, о проблемах пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме 15-35 тыс рублей в месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 14.12.2016, 12:31   #1
prukon
Новичок
Джуниор
 
Регистрация: 14.12.2016
Сообщений: 1
По умолчанию Выравнивание блока элементов по центру

Добрый день.

Подскажите пожалуйста как мне выровнять блок с категориями https://yadi.sk/i/u1-b0bXx332nWw на сайте dvapilota.com

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

Сейчас я весь блок с меню поместил вот в такой div:

Код HTML:
<div class="navbar" style="position:relative; width:80%; height:100%; text-align:center; margin: auto; outline:0px solid blue">
Но меню вы выровнялось по горизонтали.
prukon вне форума Ответить с цитированием
Старый 14.12.2016, 21:56   #2
Вадим Мошев

Старожил
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Сообщений: 8,593
По умолчанию

Чтобы выравнять блок по центру контейнера, надо:
1. Задать ему ширину (у вас есть)
2. Установить свойство margin в значение "0 auto" (а у вас просто auto)
И зачем у вас установлено абсолютное позиционирование для этого блока?

Теперь надо отрегулировать ширину блока, который вы центруете, чтобы он встал именно по центру.
Вадим Мошев вне форума Ответить с цитированием
Старый 15.12.2016, 21:04   #3
Вадим Мошев

Старожил
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Сообщений: 8,593
По умолчанию

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

HTML:
Код:
<div class="containerForAlignedBlock">
	<div class="alignedBlock">
		<div class="someItem">Прыжки с парашютом</div>
		<div class="someItem">что-то ещё</div>
		<div class="someItem">и ещё...</div>
		<div class="someItem">таких позиций может оказаться сколько угодно</div>
	</div>
</div>

CSS:
Код:
.containerForAlignedBlock {
	text-align: center;
}

.alignedBlock {
	display: inline-block;
}

.someItem {
	/*этому стилю вы задаёте стиль самостоятельно в зависимости от того,
	как вы его хотите оформить*/
}
Вадим Мошев вне форума Ответить с цитированием
Ответ
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выравнивание по центру swish HTML и CSS 3 09.08.2012 19:32
Выравнивание по центру Андрей-прог HTML и CSS 2 17.05.2012 08:27
выравнивание подменю по центру ilma55 HTML и CSS 0 19.09.2010 23:36
выравнивание по центру ruavia3 Microsoft Office Access 5 03.12.2009 09:30
выравнивание по центру в QuickReport Vasya БД в Delphi 3 18.08.2007 19:43