Верстаю сайт. Хочу сделать так, чтобы цвет меню был от левого до правого края, а сам контент меню по центру. Я сделал уже чтобы цвет был, но контент начинается от левого края. Подскажите, пожалуйста, как мне его центрировать.
-
<div align=center>Контент меню</div>– Владимир Клыков21 июн 2013 в 9:33
-
уже есть такая запись– Sergey459021 июн 2013 в 9:46
-
<center><div>Контент меню</div>– Владимир Клыков21 июн 2013 в 9:52
-
display: inline-block; и тогда только <div align=center>Контент меню</div>– binliz21 июн 2013 в 9:52
-
display: inline-block; где прописывать?– Sergey459021 июн 2013 в 9:59
|
Показать ещё 1 комментарий
4 ответа
Используейте для блока
margin: 0 auto;
Вот пример делающий похожую разметку
<html>
<head>
<style type="text/css">
* {margin: 0; padding: 0;} /* обнуляем отступы */
body {
text-align: left; /* выравниваем все содержимое body по центру */
background: #fff; /* цвет фона для наглядности */
}
div.menu-background{
width:100%;
background:#cfc;
}
/*------MENU------*/
div.menu {
width: 800px; /* ширина основного блока */
background: #fcc; /* цвет блока для наглядности */
margin: 0 auto; /* задаем отступ слева и справа auto чтобы сработало выравнивание по центру */
}
.menu > ul {
list-style-type:none;
}
.menu > ul > li{
display: inline;
}
</style>
</head>
<body>
<h1>Logo place</h1>
<div class="menu-background">
<div class="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
</div>
<h2>Some content</h2>
</body>
</html>
Вдохновлен Выравниваем сайт по центру экрана
<center><div>Контент меню</div></center>
или <div style="margin:0 auto">Контент меню</div>