使水平对齐标题居中

Question

我有三个div，我想在页面标题中水平居中，如下所示：

（nav Logo nav）

HTML：

<header class="header">
  <nav class="nav">
    <ul class="navleft">
        <li class="navleft-item">Item</li>
        <li class="navleft-item">Item</li>
    </ul>
    <div class="logo">
        <img src="img/logo.png" alt=""/> 
    </div>
    <ul class="navright">
        <li class="navright-item">Item</li>
        <li class="navright-item">Item</li>
    </ul>
  </nav>
</header>

的CSS：

.nav {
}

.logo {
}

.navleft {
}

.navright {
}

.navleft-item {
display: inline;
}

.navright-item {
display: inline;
}

CSS是裸露的，因为由于纯粹的挫败感，我删除了一半。

浮动离开所有div并不起作用，当我使用display inline-block时，我无法移动navleft和navright以使其与徽标对齐。此时我不知道。

Answer 1

您可以使用text-align: center和display: inline-block

Fiddle

或

您可以使用display: table + table-cell

Fiddle

.nav {    
    text-align: center;
}
.logo {
    display: inline-block;
}
.navleft {
     display: inline-block;
}
.navright {
     display: inline-block;
}
.navleft-item {
    display: inline-block;
}
.navright-item {
    display: inline-block;
}

Answer 2

这个怎么样：

<style type="text/css">
.navleft {float: left;}
.navright {float: right;}
.logo {text-align: center;}
</style>