html - CSS表格布局在单元格之间有很大的空间

Question

我正在编写一个网站，其标题包含徽标和标语。图像是固定宽度的，我希望标语占据图像旁边的所有空间并与图像垂直对齐，所以我使用以下代码：

<div id="header">
    <img id="logo" src="images/logo.png"/>
    <div id="tagline">
        <p>Tagline text</p>
    </div>
</div>

在我display: table用于标题、display: table-cell图像和标语 div 的 css 中。这几乎达到了我想要的，只是图像和标语之间有很大的差距。我尝试在标题上设置以下属性，但无法摆脱差距。随着浏览器宽度的减小，间隙变小并消失，所以我猜这是某种单元格间距。如何让标语填充空间？

#header {   
    display: table;
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

有关更完整的示例，请参阅http://jsfiddle.net/5LJNw/3/

Answer 1

尝试这个 ：

CSS

#tagline {
    display:table-cell;
    vertical-align: middle;
    width:100%;   // set width to 100%
    background-color: #CFE0D6;

}

演示