Здравствуйте. Делал шаблон и обломался в самом же начале. Дело в следующем: обычное меню для сайта, размещаю по средине страницы - есть, по центру. Как только применяю стиль, оно сразу к левому краю прижимается :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; /* Цвет текста при наведении курсора. */
}
