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

Question

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

<img src="logo.png" />
<a> logout link </a>
<div> navigation bar </div>

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

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 位置：相对和徽标位置：绝对。这里的技巧是“绝对位置元素相对于第一个具有非静态位置的父元素定位。” （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, rightto0和topto -1em;