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를 작성하십시오.