Попытка центрировать динамическое меню ширины

Question

У меня есть меню, созданное с помощью jquery от apycom.com, которое я пытаюсь отцентрировать. Пункты меню взяты из cms и динамически создаются при загрузке страницы. Это означает, что меню не имеет фиксированной ширины. Я пробовал несколько методов, используя только CSS, но без установки ширины для меню, они не хотят работать.

Я нашел некоторую информацию, которая заставляет меня поверить, что может быть способ сделать это с помощью JavaScript.

Есть ли способ динамически установить ширину элемента div вокруг меню, а затем установить для левого и правого полей значение auto, чтобы центрировать меню?

Если есть лучший способ сделать это, я открыт для идей.

Заранее спасибо Бьорн

Вот пример того, что у меня есть.

Я уже пробовал использовать 'margin: 0 auto;' но без настройки ширины, которая не работает. Поскольку меню создается путем циклического перемещения по пунктам меню, доступным из cms, я не знаю ширину меню.

Я пытался использовать 'display: inline-block;' и это приводит меня к выводу, что пространство блока, занимаемое меню - это только ширина меню. Теперь мне просто нужно иметь возможность центрировать этот блок. Я подумал, что может быть способ, как только меню будет создано, а ширина станет известна, что вы можете применить настройки полей.

Возможно, аналогично тому, как jquery может применять и изменять настройки стиля на лету.

<div class="top_navigation_bar">
<div id="menu">
    <ul class="menu">
        <li><a class="parent" href="/en/"><span>Home</span></a></li>
        <li><a class="parent" href="/en/web-design"><span>Web Design</span></a>
        <div>
            <ul>
                <li><a href="/en/design-packages"><span>Design Packages</span></a></li>
                <li><a href="/en/website-maintenance"><span>Website Maintenance</span></a></li>
                <li><a href="/en/redesign-website"><span>Redesign Website</span></a></li>
                <li><a href="/en/design-fundamentals"><span>Design Fundamentals</span></a></li>
                <li><a href="/en/design-elements"><span>Design Key Elements</span></a></li>
            </ul>
        </div>
        </li>
        <li><a class="parent" href="/en/website-business-solutions"><span>Business Solutions</span></a></li>
        <li><a class="parent" href="/en/internet-marketing"><span>Internet Marketing</span></a>
        <div>
            <ul>
                <li><a href="/en/small-business-marketing"><span>Small Business Marketing</span></a></li>
                <li><a href="/en/leveraging-the-internet"><span>Leveraging the Internet</span></a></li>

            </ul>
        </div>
        </li>
        <li><a class="parent" href="/en/doing-business"><span>About Us</span></a>
        <div>
            <ul>
                <li><a href="/en/about"><span>Design Team</span></a></li>
            </ul>
        </div>
        </li>
        <li><a class="parent" href="/en/blog"><span>Blog</span></a></li>
        <li><a class="parent" href="/en/contact-us"><span>Contact</span></a></li>
        <li class="last"><a href="/en/faq"><span>FAQ</span></a></li>
    </ul>
</div>

.top_navigation_bar {
    height: 46px;
    padding-top: 4px;
    background-color: #3a8658;
}

div#menu {
    height: 46px;
    padding-left: 24px;
    background: url(/site_media/template_images/images/left.png) no-repeat;
    _background: url(/site_media/template_images/images/left.gif) no-repeat;
    width:auto;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}

Answer 1

Без образца становится сложнее увидеть, что именно происходит. Было бы хорошо, если вы опубликуете образец для HTML и CSS, который вы используете. Но ослепнуть ...

Для горизонтального центрирования элемента с помощью CSS вы можете сделать:

element {margin: 0px auto;}

Этого достаточно для правильного центрирования элемента.

Обратите внимание, что блочные элементы (например, div, ul, li и p) имеют тенденцию заполнять 100% по горизонтали. Плавающие элементы или их абсолютное позиционирование заставляют их потерять характеристику полного заполнения. В этом случае элементы будут обернуты до минимального удобного размера, который позволяет отображать содержимое, если вы не установите свойства width и / или overflow.

Если вы установите ширину, а содержимое больше объявленной ширины, оно будет либо переполнено, либо перенесено. У вас есть свойства CSS для обработки этих случаев.

Я рекомендую сделать это с помощью CSS, потому что делает макет более доступным. Но если вы предпочитаете, вы можете кодировать ширину с помощью javascript или jquery, делая вашу жизнь немного проще.

Чтобы обработать это с помощью javascript, вам понадобится что-то вроде:

myMenuElement.style.width = "200px";

с Jquery ( метод ширины ):

$('#myMenuElement').width(200);

Приветствие.

EDIT

Не уверен, что именно желаемый эффект, но я внес несколько изменений в ваш CSS. Проверьте.

.top_navigation_bar {
    height: 46px;
    padding-top: 4px;
    background-color: #3a8658;
}

div#menu {
    height: 46px;
    padding-left: 24px;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.menu>li {
    display: inline;
    position: relative;
}

ul.menu>li>div {
    display: block;
    position: absolute;
    left: 0%;
}

ul.menu span {
    white-space: nowrap;
}

Следуйте хорошим справочным сведениям как из вертикального, так и горизонтального меню (я узнал из них).

Answer 2

Если вы пытаетесь центрировать #menu внутри .top_navigation_bar, тогда вы можете использовать margin:0 auto и дополнительно использовать jQuery, как это

$(function(){
    $menu = $('#menu');

    $menu.width(
        $('.menu').outerWidth() +
        $menu.outerWidth() - $menu.width()
    );
    // added the following line, because the lavalamp plugin
    // corrects itself when the window resizes..
    // so we trigger a resize event, and the plugin fixes everything ;)
    $(window).trigger('resize');
});

, это изменит размер #menu в соответствии сего содержимое и станет центрированным из-за автоматического поля, которое мы установили в css.

пример на http://www.jsfiddle.net/MCnbr/