[英]Trying to horizontally align and center an image next to a div
我希望有一種方法可以將我的標題圖像居中並水平對齊,並將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;
}
對於其他元素中的垂直居中元素,它始終是相同的技巧。 看看這里 。
您需要在要居中的元素之前創建空跨度。 這個空跨度將被稱為Centerer。 給出Centerer display:inline-block; height:100%; vertical-align:middle;
display:inline-block; height:100%; vertical-align:middle;
對於你想要居中的元素,給出display:inline-block; vertical-align:middle;
display:inline-block; vertical-align:middle;
就這么簡單。
編輯:此方法不會指定任何靜態寬度(px,甚至%)。 所以你的布局保持非常靈活。
既然你可以在所有內容中進行垂直對齊..你可以創建一個簡單的布局來解決你的標題問題。
編輯2
我為你創建了你的布局。 正如你所看到的......它是一個非常簡單的(我正在使用垂直對齊技巧)。 http://jsfiddle.net/avrahamcool/N5Q2W/2/現在采用這種基本布局,並且適用於你的css。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.