Question

我只想将文本相对于图片垂直对齐，并将所有内容放入内联而不是块状。我一直在使用固定位置和margin-top来实现这一点，但这是非常糟糕的方法，我认为应该有更好的方法。

因为jsFiddle在这里是我的代码的其他类似网站。

http://www.cssdesk.com/muEnL

Answer 1

将子div设置为单元格显示。然后使用vertical align属性。

http://www.cssdesk.com/zCGrb

.user-container div { display: table-cell; padding: 5px; vertical-align: middle; }

很酷的网站顺便说一句。我喜欢它，因为它显示了css的变化。

Answer 2

据我所知，这应该做你想要的。只要你不在div中包装所有内容，图像和文本/链接将保持内联。

<div class="user-container">
    <img src="http://www.gravatar.com/avatar/ec39c767ba245c2434ad2c31a3c481e5?s=128&d=identicon&r=PG" width="33" height="33"/>

    <a href="#">John Doe</a>

    <a href="#">Logout</a>
</div>

因此，您只需要在图像样式中添加“vertical-align：middle”，例如：

.user-container img {
    vertical-align: middle
}

使用原始HTML的另一个选择是使用此CSS：

.user-container div {
   display: inline;
 }

.image img {
  vertical-align: middle;
}

Answer 3

尝试以下方法。这将图像和名称放在同一行的垂直中心，并在其下方显示注销（当然可以调整）：

.image {
  float:left;
  line-height: 30px;
}

.name {
  float: left;
  line-height: 30px;
}

.logout {
  clear: both; 
}

垂直对齐中间的文本并将div放在一起

3 个答案: