HTML CSS：在一行上垂直对齐元素答案

【问题标题】：HTML CSS: aligning elements Vertically on one lineHTML CSS：在一行上垂直对齐元素
【发布时间】：2012-03-04 13:49:10
【问题描述】：

我有一个用户登录标题，其中显示了问候语、用户个人资料图片的缩略图（始终为固定大小 - 30x30）和注销链接。每段文字和照片之间都有垂直分隔符。

<span>Hello [username]</span>
<span class="divider"></span>
<img src="/photo.jpg" />
<span class="divider"></span>
<a href="/logout">Logout</a>

这是我想要的结果：

.. 但是图片的高度将所有其他元素“向下”推，所以我明白了：

我如何垂直对齐这些 - 有没有办法在不为每个元素硬编码 px 边距/填充的情况下做到这一点？

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

写vertical-align:middle;或vertical-align:top;。像这样写：

img, span , a{
  vertical-align:middle
}

查看http://jsfiddle.net/bB9vV/

【讨论】：

【解决方案2】：

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img, .divider{float:left;}
.up{margin-bottom:15px; float:left;}
</style>
</head>
<body>
<span class='up'>Hello [username]</span>
<span class="divider"></span>
<img src="/photo.jpg" />
<span class="divider"></span>
<a class='up' href="/logout">Logout</a>
</body>
</html>

【讨论】：

【解决方案3】：

如果我理解正确，我想你会想要使用 CSS 更改分隔线的行高。给 line-height 一个等于图像高度的值。然后你需要将文本居中。

.divider{
line-height:30px;
}

编辑您可能还需要对齐图像。示例使用 {vertical-align:middle;} 作为您的图像

更多信息在这里align image vertically

【讨论】：