необходимо выровнять элементы списка до центра div

Я хочу выровнять список ссылок, которые будут центрированы в div.необходимо выровнять элементы списка до центра div

Я попробовал маржу: 0 авто, но не повезло.

Замечание: div-оболочка навигация должна оставаться на месте, это всего лишь фрагмент html, который вызывает беспокойство.

Отметьте http://jsfiddle.net/bkmorse/aaCY7/, чтобы увидеть ссылки, которые мне нужно правильно выровнять в div.

HTML

<div id="navigation-wrapper"> 
    <ul id="top-navigation"> 
    <li><a href="">Home</a></li> 
    <li><a href="">Volunteer</a></li> 
    <li><a href="">Support</a></li> 
    <li><a href="">Educate</a></li> 
    <li><a href="">Contact</a></li> 
    <li><a href="">Gift Shop</a></li> 
    <li><a href="">Directions</a></li> 
    </ul> 
</div>

CSS

#navigation-wrapper { 
width:465px; 
border:1px solid red; 
} 

#top-navigation { 
margin: 0 auto; 
border:1px solid blue; 
padding:5px 0; 
} 

#top-navigation li { 
display:inline; 
list-style-type:none; 
margin:2; 
}

источник

2012-03-26 Brad

margin: 0 auto; будет работать, если вы определите фиксированную ширину. –

Измените свой CSS на это. Это работает.

#navigation-wrapper { 
width:465px; 
border:1px solid red; 
margin:0 auto; 
text-align:center; 
} 

#top-navigation { 
border:1px solid blue; 
padding:5px 0; 
} 

#top-navigation li { 
display:inline; 
list-style-type:none; 
margin:2; 
}

источник

2012-03-26 18:52:03

Margin:auto работа с определения width .WRITE так:

#navigation-wrapper { 
width:465px; 
margin: 0 auto; 
border:1px solid red; 
    text-align:center; 
} 

#top-navigation { 
display:inline-block; 
border:1px solid blue; 
padding:5px 0; 
}

проверить это http://jsfiddle.net/aaCY7/1/

источник

2012-03-26 18:51:08 sandeep

встроенный блок дает проблемы с совместимостью IE, которые вы можете решить только с уродливыми хаками. Это можно легко решить без встроенных блоков и проблем. –

Поскольку ваша верхняя навигационная панель не имеет установленной ширины, она фактически центрирована. Однако ли внутри него нет. Если вы хотите видеть эти пункты в центре, то

#top-navigation { 
margin: 0 auto; 
border:1px solid blue; 
padding:5px 0; 
text-align: center; 
}

Если вы хотите, чтобы список центрированный в DIV, но все еще остается выровнять вещи в использовании этого

#top-navigation { 
margin: 0 auto; 
border:1px solid blue; 
padding:5px 0; 
width: 300px; 
}

или сделать и если какой-то сочетание этих двух необходим.

источник

2012-03-26 19:00:22

Мне просто нужно знать дисплей встроенный для предметов li, которые косили для меня. В случае выравнивания по центру мы можем добавить tex-align: center в главном div. В приведенном выше случае #top-navigation { margin: 0 auto; border:1px solid blue; padding:5px 0; text-align: center; } Должно работать

источник

2013-08-13 15:29:07

необходимо выровнять элементы списка до центра div

ответ

Смежные вопросы