Задать вопрос
@Focuspresent
html

Как переместить меню на центр страницы?

Здравствуйте. Делал шаблон и обломался в самом же начале. Дело в следующем: обычное меню для сайта, размещаю по средине страницы - есть, по центру. Как только применяю стиль, оно сразу к левому краю прижимается :C Как переместить его на центр страницы? Помогите, пожалуйста.

html
<head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Главная страница</title>
  <meta name="title" content="" />
  <meta name="keywords" content="здесь пишем ключевые слова, через запятую" />
  <meta name="description" content="здесь пишем краткое описание тематики страницы" />
  <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" /> 

</head>
<body>
 <div id="wrapper">
   <div id="header" align="center">

   </div>
 <div id="middle" align="center">
   <div id="container" align="center">
       <div id="zaq" align="center">
        <div id="menu">
          <a href="home.html">Главная</a>
      <a href="#">страница 2</a>
     <a href="#">страница 3</a>
    </div>
    </div>    
	 <div id="content">     
     </div><!-- #content-->
 </div><!-- #container-->
 </div><!--end #middle-->
</div><!--end #wrapper -->
   <div id="footer">
                                      -- здесь блок футера --     
   </div><!--end #footer -->
</body>
</html>

Вот CSS, стиль я взял с интернета, т.к. сам толком ничего не понимаю, думаю, оно видно, судя по уровню моего вопроса -_-

#header
{
	top: 0px;
	width: 100%;
	height: 50%;
}
#middle
{
	width: 100%;
	height: 30%;
	left: 50%;
}
#footer
{
	width: 100%;
	height: 20%;
	bottom: 0px;
}
#menu {
      text-decoration: none;
}
#menu a {
   float: left; /* Выстраивание элементов списка в один ряд. */
   margin-right: 1px; /* создание отступов для того, чтобы не сливались пункты меню. */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Указание типа шрифта. */
   font-size: 14px; /* Размер текста в ссылках. */
}
#menu a {
   display: block; /* Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */
   padding: 15px 20px;  /* Внутри блочные отступы. */
   background: #0db5b5; /* Цвет блоков меню. */
   color: #3f3f3f; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}
#menu a:hover {
   background: #92d3d3; /* Цвет блока при наведении курсора. */
   color: #6b6b6b;  /* Цвет текста при наведении курсора. */
}
  • Вопрос задан
  • 9641 просмотр
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 4
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
Не слушайте предыдущих комментирующих по поводу align="center". Они сами не знают, почему не стОит использовать этот атрибут. Это не "дурной тон", это абсолютно рабочая конструкция из языка HTML4.
В старые добрые времена, когда CSS еще не изобрели, вся стилизация страницы зиждилась на атрибутах, задаваемых непосредственно в тегах. Некоторые атрибуты остались, а большинство перекочевало в CSS с более широким разнообразием функционала. Поэтому в HTML5 решили отказаться от использования атрибутов, у которых есть аналоги в css. Эта констукция просто устарела, но отнюдь не является дурным тоном.

1. Уберите у ссылок (#menu a) свойство float: left, оно мешает отображению по центру и всегда сбрасывает элементы влево.
2. Замените у ссылок свойство display с "block" на "inline-block" - это позволит "превратить" ссылки в "строчные блоки" - ссылки будут выглядеь как кнопки, но выстраиваться будут друг за другом, в одну строку.

jsfiddle.net/nnuofrrr - вот результат
Ответ написан
5 комментариев
5 комментариев
@IceJOKER
Web/Android developer
Не пользуйтесь атрибутом ALIGN, чтобы центрировать блочный элемент укажите ширину и margin: 0 auto; (то есть по бокам margin должен быть авто).
Чтоб центрировать строчные элементы для блочного родителя укажите text-align: center;

Еще один способ - это указать абсолютную позицию и left|rigth: 0;

Именно для данного случая подсказал бы, если бы код был вставлен с помощь - jsfiddle.net
Ответ написан
Комментировать
Комментировать
mrquake
@mrquake
Абырвалг
Приветствую!
Применять для выравнивания по центру align="center" - дурной тон, делайте все манипуляции с HTML, в том числе и выравнивание посредством CSS.

Попробуйте, чтобы понять принцип:
#middle {
 width: 960px;
heigth: 800px;
margin: 0 auto;
}
Ответ написан
Комментировать
Комментировать
eucalipt
@eucalipt
Самоделкин.
Есть несколько способов, и каждый хорош по-своему. Я не буду расписывать преимущества каждого, ибо каждый из них лучше подходит под свои конкретные цели.

1. Поместите нужный участок html кода в теги
<center></center>

2. Поместите блок, который хотите выровнять по-центру в другой блок и этому второму задайте
div.parent {
text-align: center;
}


3. Поэкспериментируйте с
margin: auto;
/* и */
margin: 0px auto;


4. Если известна точная ширина блока в пикселях, может пригодиться это:
div.to-center {
margin: 0px -150px;
padding: 0px;
left: 50%;
width: 300px;
position: absolute;
}


От margin'а нужно отнять половину ширины блока. А ширина 300px взята для примера.

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

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Расширение для Google Chrome
22 дек. 2024, в 20:34
3000 руб./за проект
Парсер-бот
22 дек. 2024, в 20:12
10000 руб./за проект
Ещё заказы