HTML CSS：在一行上垂直对齐元素
[英]HTML CSS: aligning elements Vertically on one line
问题描述
I have a user logged-in header which shows a greeting, a thumbnail of the user's profile picture (always a fixed size - 30x30) and a logout link. 
我有一个用户登录标题，显示问候语，用户个人资料图片的缩略图（总是固定大小 - 30x30）和注销链接。 There are vertical separators between each piece of text and the photo. 每段文字和照片之间都有垂直分隔符。
<span>Hello [username]</span>
<span class="divider"></span>
<img src="/photo.jpg" />
<span class="divider"></span>
<a href="/logout">Logout</a>
Here is the result I am going for: 这是我要去的结果：
.. but the height of the picture pushes all the other elements 'down' so I get this: ..但是图片的高度将所有其他元素“向下”推，所以我得到了这个：
How do I align these vertically - is there a way to do it without hard-coding px margins/padding for each element? 如何垂直对齐 - 有没有办法在不对每个元素进行硬编码px边距/填充的情况下进行？
3 个解决方案
解决方案1
5 已采纳 2012-03-04 05:47:23
Wrrite vertical-align:middle ; Wrrite vertical-align:middle ; or vertical-align:top; 或vertical-align:top; . 。 Write like this : 像这样写：
img, span , a{
vertical-align:middle
}
Check this http://jsfiddle.net/bB9vV/ 检查这个http://jsfiddle.net/bB9vV/
解决方案2
1 2012-03-04 05:39:14
If I understand you correctly, I think you will want to change the line-height of the divider using CSS. 如果我理解正确，我想您会想要使用CSS更改分隔线的行高。 Give the line-height a value equal to the height of your image. 为行高指定一个等于图像高度的值。 Then you will need to center the text. 然后你需要将文本居中。
.divider{
line-height:30px;
}
EDIT You may also need to align your image. 编辑您可能还需要对齐图像。 EXAMPLE use {vertical-align:middle;} for your image 示例使用{vertical-align：middle;}作为图像
More info here align image vertically 这里有更多信息垂直对齐图像
解决方案3
1 2012-03-04 05:41:40
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.