Задать вопрос
@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;  /* Цвет текста при наведении курсора. */
}
  • Вопрос задан
  • 9547 просмотров
Комментировать
Подписаться 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 взята для примера.

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Подключить сервер к сети
27 апр. 2024, в 02:39
2500 руб./за проект
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
Ещё заказы