CSS 如何居中对齐徽标图像和右对齐导航 ul
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9501873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center align logo image and right align navigation ul
提问by toandang
Both the logo and navigation are in a header div and I'd like to have the logo centered while the navigation is aligned to the right.
徽标和导航都在标题 div 中，我希望在导航向右对齐时将徽标居中。
I've tried doing display:block and margin: auto for the image which gets it centered, but then it pushes the navigation down to the next line.
我试过为使图像居中的图像执行 display:block 和 margin: auto ，但随后它将导航向下推到下一行。
Current css is:
当前的CSS是：
.logo {
display: inline-block;
width: 400px
margin: 0 auto;
}
/* Navigation */
#nav {
display: inline-block;
margin: auto;
padding:0;
list-style:none;
float: right;
}
Read that I had to put width in to make margin:auto work but all it does is enlarges the image. Thanks.
读到我必须输入宽度才能使边距：自动工作，但它所做的只是放大图像。谢谢。
采纳答案by sandeep
Remove floatfrom your #nav& define text-align:centerto it's parent. Write like this:
float从您的#nav& 定义text-align:center到它的父项中删除。像这样写：
.header{
text-align:center;
}
.logo {
display: inline-block;
width: 400px
}
/* Navigation */
#nav {
display: inline-block;
padding:0;
list-style:none;
text-align:left;
}
