Центрирование 2 div разного размера в главном/родительском div

У меня есть 2 меню, которые должны быть сосредоточены на строке меню. Должен хорошо работать в IE7, IE8, IE9, Chrome, FF. Например, я добавил ширину/высоту для обоих на основе хромированных измерений.

большое меню:

<div id="outer-menu-bar" style="width:800px;height:32px;">  
     <div id="inner-menu" style="width:578px;height:32px;">Foo foo</div>
</div>

небольшое меню:

<div id="outer-menu-bar" style="width:800px;height:32px;">  
     <div id="inner-menu" style="width:285px;height:32px;">Foo foo</div>
</div>

Я попытался установить стиль #inner { width: 50%; маржа: авто; } как описано в Как горизонтально центрировать ‹div› в другом ‹div›? но одно меню больше 50%, поэтому оно обрезается. Маленький висит левее на 20 пикселей. Во время прототипа мы взломали его с помощью jQuery, но это нежелательно, потому что меню прыгает после загрузки.

Мысли?


html css centering
person JStark    schedule 11.11.2011    source источник
comment
поместите свой код на jsfiddle.net и покажите свою проблему   -  person bravedick    schedule 12.11.2011

Ответы (2)


arrow_upward
1
arrow_downward

Возможное решение

Цветные рамки для пояснений.
http://jsfiddle.net/jnG4q/

862px > 800px, поэтому они не помещаются в одну строку. Меню меньшего размера для просмотра примера:
http://jsfiddle.net/jnG4q/1

Требуется HTML

<div id="outer-menu-bar" style="width:800px;height:32px;">  
    <div class="inner-menu" style="width:578px;height:32px;">Foo foo</div>
    <div class="inner-menu" style="width:285px;height:32px;">Foo foo</div>
</div>

Дополнительный CSS

#outer-menu-bar {
    text-align: center;
}

.inner-menu {
    display: inline-block;
}
person Smamatti    schedule 11.11.2011
comment
Я преобразовал двойной id="inner-menu" в class. - Вы можете выбрать два идентификатора и установить width и height меню в файле CSS (лучший стиль/практика). - person Smamatti; 12.11.2011

arrow_upward
1
arrow_downward

Я думаю, что у Smamatti есть хорошее решение. Я придумал более или менее то же самое, с той лишь разницей, что я удалил все встроенные стили.

http://jsfiddle.net/S1l3/YVdFq/4/

HTML:

<div id="outer-menu-bar">  
     <div class="inner-menu" >Foo fooFoo fooFoo fooFoo fooFoo fooFoo fooFoo </div>
    <div class="inner-menu" >Bar barBar bar Barbar </div>
</div>

CSS:

#outer-menu-bar
{
    text-align:center;
    background:#900;
}

.inner-menu
{
    display:inline-block;
    background:#ccc;
}
person ZeljkoSi    schedule 11.11.2011
comment
Добро пожаловать в Stack Overflow! Хотя теоретически это может ответить на вопрос, было бы предпочтительнее включить сюда основные части ответа и предоставить ссылку для справки. - person codingbadger; 12.11.2011
comment
Я исправил свой пост, спасибо за внимание и приятный прием ^^ - person ZeljkoSi; 12.11.2011