两种不同大小的文本元素的垂直对齐

Question

我有两个不同的元素，徽标和导航。该徽标是48px，但导航是16px。我面临的挑战是将它们垂直对齐，然后将它们与我的网页内容水平对齐。

<div class="header"> 
    <div class="logo">LOGO</div> 
    <ul class="nav"> 
     <li>ABOUT</li> 
     <li>CONTACT</li> 
    </ul> 
</div> 

<div class="container"> 
    <div class="wrapper"> 
     CONTENT 
    </div> 
</div> 

然后在我的CSS：

.header { 
    height: 10%; 
    width: 100%; 

    display: table; 
} 

.logo { 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
} 

.nav { 
    list-style: none; 
    margin: 0; 
    padding: 0; 

    display: table-cell; 
    vertical-align: middle; 
} 

.container { 
    width: 100%; 
    height: 90%; 
    display: table; 
} 

.wrapper { 
    height: 100%; 

    display: table-cell; 
    vertical-align: middle; 
} 

这段代码产生的输出，其中两个上下排列，但我不知道怎么用，然后在容器中的内容保持一致，因为margin在容器上是auto。如果有人能给我一些好的方向。

我的总体目标是在标题中垂直对齐徽标和导航，但接下来会说例如我的内容宽度为590px，将徽标（水平）对齐到左侧，向右导航。

输出应看起来像

|logo|  |nav | 
|contentttttttttttt| 

由于

Answer 1

http://jsfiddle.net/tqBUb/

下面的代码完全垂直中心的不同尺寸的文本，并水平这两种元素的总组合宽度。这是你想要的吗？无论哪种方式，这可能是一个很好的起点。标题元素的宽度可以更改为任何内容，并相应地进行调整。

HTML

<header> 
    <div class="container"> 
     <div class="logo"> 
      <span>LOGO</span> 
     </div> 
     <nav class="main-nav"> 
      <ul> 
       <li>HOME</li> 
       <li>ABOUT</li> 
      </ul> 
     </nav> 
    </div> 
</header> 

CSS

header { 
    color: #fff; 
    width: 80%; 
    background: blue; 
} 

.container { 
    display: table; 
    background: red; 
    margin: 0 auto; 
} 

.logo { 
    display: table-cell; 
    vertical-align: middle; 
} 

.logo span { 
    font-size: 48px; 
    line-height: 1; 
} 

.main-nav { 
    display: table-cell; 
} 

.main-nav ul { 
    list-style-type: none; 
} 

.main-nav ul li { 
    display: inline-block; 
} 

---

|logo|_______|nav| 
|_____content____| 

要在590px实现这一格式，您将需要590屏幕宽度或媒体查询断点减。然后...只需更改显示：表;在.container上显示：block;和display：table-cell; div的显示：块。然后将.logo div留下，然后浮动.main-nav右边。