試圖水平對齊和居中一個div旁邊的圖像

Question

希望能有一種方法來居中和水平對齊我的標題圖像與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; 
} 

Answer 1

它總是垂直居中其他元素的元素同樣的伎倆。 看一看here。

您需要在要居中的元素之前創建一個空跨度。 這個空的跨度將被稱爲Centerer。 給中心件display:inline-block; height:100%; vertical-align:middle; 並要居中的元素，給display:inline-block; vertical-align:middle;

就這麼簡單。

編輯： 此方法不會使您指定任何靜態寬度（px或甚至％）。 所以你的佈局保持非常靈活。

現在，您可以縱向排列任何內容。 您可以創建一個簡單的佈局來實現您的標題問題。

編輯2

我創建你的佈局爲您服務。你可以看到，它是一個非常簡單的（我正在使用垂直對齊技巧）。 http://jsfiddle.net/avrahamcool/N5Q2W/2/ 現在採取這種基本佈局，並適合你的CSS。