Question

我有一个css宽度为80％的标题元素。在该元素内部，我有一个图像，我想要位于标题的左侧，一个徽标，我有一个h1元素，我想要位于标题的右侧，一个标语，如下所示：

10% ---| {LOGO} {TAGLINE} |--- 10%

我的问题是，图像的高度约为65px，h1的文字高度约为20px，我希望它们在底部完美对齐，以便文本的底部与底部齐平图像。

我知道我可以使用行高并找出差异，或者我可以绝对定位它们并给它们一个css＆＃34; bottom＆＃34;属性，但是有更聪明的方法吗？

Answer 1

这应该有效：

<强> HTML

<header>
    <img src="http://placehold.it/200x65" alt="" />
    <h1>Tagline goes here</h1>
</header>

<强> CSS

header {
    background: #eee;
    width: 80%;
    text-align: center;
}
header > * {
    display: inline-block;
    vertical-align: bottom;
}
header h1 {
    font-size: 20px;
    line-height: 1;
    margin: 0;
}

JSFiddle例如：http://jsfiddle.net/galengidman/9309yrL6/1/

CSS将h1元素与流体标题中的图像底部对齐

1 个答案: