对齐中间的元素

Question

我有以下页面：

Page on JSBin

如果你看右上角，那么你可以看到设置＆amp;聊天图片和用户名正在与个人资料图片的下边框对齐。

如何让顶部右侧中间的右上角对齐所有元素？

顶栏应该看起来像这样：

编辑：我已将vertical-align：middle属性应用于这些元素。但是，正如您在ranganadh的JSBin所看到的那样，图像似乎有点太靠近下角。有什么建议吗？

Answer 1

将vertical-align:middle属性添加到课程.top-right-button

更改为

.top-right-button{
    margin-right: 5px;
    vertical-align:middle
}

检查JSBin

Answer 2

您需要按如下方式修改CSS：

.right-stuff {
    position: absolute;
    bottom: 2px;
    height: 100%;
    right: 0px;
    font-family: Roboto Condensed, bold;
    font-size: 24px;
}

.top-right-button {
    margin-right: 5px;
    vertical-align: middle;
}

vertical-align属性不是继承的，必须明确指定。

默认情况下，最右侧的图像与容器块的默认基线对齐。将垂直对齐设置为middle可以提供更令人满意的视图。

如果需要，请使用bottom偏移量来调整.right-stuff块的整体垂直位置。

请参阅http://jsbin.com/uSiTOpU/16/edit

上的演示

Answer 3

我希望我能理解你的编辑。 尝试改变

#top-right-profile-image {
margin-top: 5px;
width: 40px;
height: 40px;
background-color: #ffffff;

}

到

#top-right-profile-image {
width: 40px;
height: 40px;
background-color: #ffffff;

}

它可以提供更好看的结果。

Answer 4

我相信您只需在个人资料图片中添加valign =“top”。

<img valign="top" class="top-right-button" id="top-right-profile-image" src="//www.placehold.it/20x20"/ >