0

Верстаю сайт. Хочу сделать так, чтобы цвет меню был от левого до правого края, а сам контент меню по центру. Я сделал уже чтобы цвет был, но контент начинается от левого края. Подскажите, пожалуйста, как мне его центрировать.

6
  • <div align=center>Контент меню</div> 21 июн 2013 в 9:33
  • уже есть такая запись
    – Sergey4590
    21 июн 2013 в 9:46
  • <center><div>Контент меню</div> 21 июн 2013 в 9:52
  • display: inline-block; и тогда только <div align=center>Контент меню</div>
    – binliz
    21 июн 2013 в 9:52
  • display: inline-block; где прописывать?
    – Sergey4590
    21 июн 2013 в 9:59

4 ответа 4

1

Используейте для блока

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>

Вдохновлен Выравниваем сайт по центру экрана

1

<center><div>Контент меню</div></center> или <div style="margin:0 auto">Контент меню</div>

1

http://jsfiddle.net/Sz46d/ вот о чем я говорил

1

Внесу и я свои пять копеек - http://jsfiddle.net/Alex83/Gz8AN/

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.