-1

我有以下页面：

JSBin 页面

如果您查看右上角，则可以看到设置和聊天图片以及用户名与个人资料图片的下边框对齐。

我怎样才能使右上角的所有元素在顶栏的中间对齐？

顶栏应该是这样的：在此处输入图像描述

编辑：我已将垂直对齐：中间属性应用于这些元素。但是，正如您在 ranganadh 的JSBin中看到的那样，图像似乎离下角有点太近了。对此有何建议？

4

4 回答 4

1

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

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

}

它提供了更好看的结果。

于 2013-09-13T01:01:35.490 回答
1

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

改成

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

检查JSBin

于 2013-09-12T14:43:39.657 回答
1

您需要按如下方式修改您的 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上的演示

于 2013-09-12T14:45:45.427 回答
0

我相信您只需要在您的个人资料图片中添加一个 valign="top" 即可。

<img valign="top" class="top-right-button" id="top-right-profile-image" src="//www.placehold.it/20x20"/ >
于 2013-09-12T15:11:54.780 回答