1

我已经整理了一个示例代码，因为我试图让 2 个不同大小的图像在顶部对齐，如下所示：

HTML

<div id="test">
    <div class="social-media">
        <img src="http://www.ok.gov/ltgovernor/images/Facebook-icon.png" width="120"/>
        <img src="http://semanticweb.com/files/2012/01/twitter_logo.jpg" width="50" />
    </div>
</div>

CSS

test {
width:980px;
margin-left:auto;
margin-right:auto;
position:relative;
}

.social-media {
position:absolute;
background-color:#000;
right:0;
top:0;
vertical-align:top !important;
}

我现在在网上阅读了几篇文章后意识到，垂直对齐在 div 中不起作用，解决方案是使用绝对定位。唯一的问题是我已经对图像父 div 使用绝对定位。

在也是绝对值的父 div 中做绝对值是否是一种好习惯。

但是，如果我要在 img 上放置一个绝对位置，那么所有 img 将相互堆叠，除非我要为每个 img 指定一个类。

所以我的下一个想法是在 div 中的 img 上放置一个浮点数。我只是想知道这是否是一种好习惯，或者是否有人可以告诉我一种更清洁的方法？

此外，如果我希望图像居中对齐，这将如何完成，因为 float 方法的工作原理是让图像在顶部对齐，但我不确定如何居中对齐或可能在底部？

4

2 回答 2

2

将 overflow:auto 放在社交媒体 div 上，然后将 float:left 添加到您的图像中。

于 2012-07-12T16:13:21.373 回答
1

请记住，您也可以使用负整数，例如vertical-align: -1px;向上-1px

有关更多详细信息，请参阅CSS vertical-align 属性并在此处试用。

于 2012-07-12T16:35:26.117 回答