尝试将图片水平对齐并居中显示在一个 div 旁边

Question

尝试将图片水平对齐并居中显示在一个 div 旁边

3

希望有一种方法可以将我的标题图像居中并与旁边容纳社交媒体和声明的div水平对齐。我真的想不出来怎么做。

你会看到，在社交div中，我的链接挨在一起，但我不知道如何简单地完成所有这些居中操作。以下是代码：

<header>
<a href="index.html"><img class="imghdr" src="images/logo.png" alt="SWC Marketing logo" width="358" height="90"/></a>
<div id="social">
<p style="color:white;">My Social Handle</p>
<a href="http://www.twitter.com/scottieclifton" target="_blank"><img class="twitter" src="images/social/media/twitter_bx.png" alt="twitter" border="0" width="40" height="40"></a>
<a href="http://www.facebook.com/scottwclifton" target="_blank"><img class="facebook" src="images/social/media/facebook_bx.png" alt="facebook" border="0" width="40" height="40"></a>
<a href="http://www.linkedin.com/in/swcmarketing" target="_blank"><img class="linkedin" src="images/social/media/linkedin_bx.png" alt="linkedin" border="0" width="40" height="40"></a> 
<a href="https://plus.google.com/u/0/107873413246089179835/posts" target="_blank"><img class="google" src="images/social/media/googleplus_bx.png" border="0" alt="googleplus"  width="40" height="40"></a>              
</div>
</header>

CSS：

header {
    margin:10px auto 0px auto;
    background-color:blue;
    line-height: 0px;
    text-align:center;
    clear:both;
    position:relative;
    }

.hdrimg {
    display:block;
    font-family: arial, helvetica, sans-serif;
    font-size: 12pt;
    font-style: italic;
    font-weight: regular;
    letter-spacing: 1px; 
    background-color: red;
    float:left;
    }


#social {
    text-align:center;
    margin: 0px;
    padding: 0px;
    vertical-align:middle;
    background-color:red;
    float:right;
    }

img.twitter{
    position:absolute;
    top:0px;
    left:0px; 
}   
img.facebook{
    position:absolute;
    top:40px;
    left:40px; 
}       
img.linkedin{
    position:absolute;
    top:40px;
    left:0px; 
}       
img.google{
    position:absolute;
    top:0px;
    left:40px; 
}   

#social p{
    display:inline-block;
    vertical-align:middle;
    position:absolute;
    top: 25px;
    left: 80px;
}

- Scott

你是否担心旧版浏览器，比如IE7？使用内联块或表格单元格可能会起作用。 - Marc Audet

我个人不需要表格单元格。我不太担心IE7。 - Scott

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- avrahamcool · Accepted Answer

在其他元素中垂直居中元素的技巧总是相同的。请看这里。

您需要在要居中的元素之前创建一个空的 span 元素。这个空的 span 元素将被称为 Centerer。给 Centerer 添加 display:inline-block; height:100%; vertical-align:middle; 对于要居中的元素，添加 display:inline-block; vertical-align:middle;

就是这么简单。

编辑： 此方法不需要指定任何静态宽度（px，甚至%）。因此您的布局非常灵活。

现在，您可以在任何地方垂直对齐任何内容... 您可以创建一个简单的布局来解决您的标题问题。

编辑2：

我已经为您创建了布局。正如您所看到的... 这是一个非常简单的布局（我使用了垂直对齐技巧）。 http://jsfiddle.net/avrahamcool/N5Q2W/2/ 现在，将这个基本布局应用到您的CSS中。