如何居中对齐徽标图像和右对齐导航 ul

Question

徽标和导航都在标题 div 中，我希望在导航向右对齐时将徽标居中。

我已经尝试对图像进行 display:block 和 margin: auto 使其居中，但随后它将导航推到下一行。

当前的css是：

.logo {
    display: inline-block;
    width: 400px
    margin: 0 auto;
}

/* Navigation */

#nav {
    display: inline-block;
    margin: auto; 
    padding:0; 
    list-style:none;
    float: right;
}   

读到我必须输入宽度才能使 margin:auto 工作，但它所做的只是放大图像。谢谢。

Answer 1

从您的 #nav 中删除 float 并将 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;
}