Question

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

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

在css中，我使用display: table作为标题，使用display: table-cell作为图片和标语div。这几乎实现了我想要的，除了图像和标语之间有很大的差距。我已经尝试在标题上设置以下属性，但无法摆脱差距。随着浏览器宽度的减小，间隙变小并消失，所以我猜这是一种细胞间距。如何让标语填充空间？

#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;

}

Demo

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

1 个答案: