在图像基线处对齐表单文本

Question

我想做类似以下的事情，但我无法弄清楚如何对齐导航栏上方的注销链接，而不指定明确的padding或{{ 1}}如果图像的大小发生变化，会破坏布局。

line-height

我正在使用引导程序，但我也可以使用非引导程序解决方案。

Answer 1

正如Thanix所说，你可以结合相对和绝对定位来实现这一目标。为图像和注销链接创建一个包含div，以便可以在此底部设置注销链接。

<div class="header">
    <img class="logo_image" src="logo.png" width="40" height="40" /> 
    <a class="logout_link"> logout link </a>
    <div class="clear"></div>
</div>
<div class="nav_bar">navigation bar</div>

然后使包含div位置：relative和徽标位置：绝对。这里的技巧是“绝对位置元素相对于第一个具有静态位置的父元素定位。” （www.w3schools.com）。这意味着您可以使用bottom：0px和right：0px将其放置在包含div的右下角。

.header {position:relative;}
.logout_link {    
    position:absolute;
    bottom:0px;
    right:0px;
}
.logo_image {
    float:left;
}
.clear {clear:both;}

包含div的末尾的class =“clear”div是为了确保包含div填充其子组件的空间。

Answer 2

1. 将退出<a>放在导航栏<div>内。
2. 将导航栏的position设置为relative。
3. 将退出的position设置为absolute，将right设置为0，将top设置为-1em;