Question

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

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

这是我要去的结果：

Desired result

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

Actual result

如何垂直对齐 - 有没有办法在不对每个元素进行px边距/填充进行硬编码的情况下进行？

Answer 1

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

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

选中此http://jsfiddle.net/bB9vV/

Answer 2

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

.divider{
line-height:30px;
}

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

此处有更多信息align image vertically

Answer 3

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

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

3 个答案: