需要将列表项对齐到div的中心

我试过margin：0 auto，但没有运气。

注意：navigation-wrapper 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

保证金：0自动;如果你定义一个固定的宽度将会工作。 – 2012-03-26 18:50:02

将您的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

inline-block给IE兼容性带来了问题，你只能用丑陋的黑客来解决。这可以很容易地解决，而不会出现内联块和问题。 – 2012-03-26 18:58:54

由于您的顶级导航ul没有设置宽度，它实际上居中。然而里面的李不是。如果你想看到的那些项目，然后

#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

我只是需要知道里面的物品为我启动的显示内联。在中心对齐的情况下，我们可以在主div中添加tex-align：center。在上述情况下 #top-navigation { margin: 0 auto; border:1px solid blue; padding:5px 0; text-align: center; } 这应该工作

来源

2013-08-13 15:29:07

需要将列表项对齐到div的中心

回答

相关问题