我希望 Logo 居中对齐，社交媒体按钮在标题右侧对齐。我如何实现？我已经能够让它与我的导航栏对齐，但这不是我想要的。任何帮助，将不胜感激。
HTML
<body>
<div id="wrapper">
<header>
<div class="logo">
<a href="index.html"><img src="http://i.imgur.com/cosDXx1.png"/></a>
</div>
<div class ="social">
<a href="http://instagram.com/phipsibing"><img src="http://i.imgur.com/1GhbSOj.png"/></a>
<a href="https://twitter.com/phi_psi_bing"><img src="http://i.imgur.com/oawoJtC.png"/></a>
<a href="https://www.facebook.com/phipsi.sociallist?fref=ts"><img src="http://i.imgur.com/2dAtAX3.png"/></a>
</div>
</header>
<nav>
<ul class="egmenu">
<li><a href="#">Home</a></li>
<li><a href="#" class="has-sub">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Brothers</a></li>
</ul>
</li>
<li><a href="#" class="has-sub">Philanthropy</a>
<ul>
<li><a href="#">Kovacs Color Run</a></li>
<li><a href="#">Greek God</a></li>
<li><a href="#">Boys & Girls Club</a></li>
</ul>
</li>
<li><a href="#">Membership</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS
body {
margin:0px;
padding:0px;
}
header {
height:105px;
background-color:black;
text-align:center;
}
header img{
display:inline-block;
margin: 0 auto;
}
header .social a {
float:right;
}
ul.egmenu {
background: #333;
height: 30px;
width: 100%;
text-align:center;
}
ul.egmenu > li {
position: relative;
display:inline-block;
list-style:none;
}
ul.egmenu ul {
background: #444;
display: none;
position: absolute;
left: 0; top: 100%;
}
ul.egmenu a {
cursor: pointer;
display: block;
color: white;
line-height: 30px;
padding: 0 20px;
text-decoration:none;
}
ul.egmenu li {
list-style: none;
}
ul.egmenu li:hover {
background: #555;
}
ul.egmenu li:hover ul {
display: block;
padding:0;
}
@media all and (max-width: 600px) {
ul.egmenu { height: auto; padding:0;}
ul.egmenu > li { float: none; width: 100%; }
ul.egmenu a { line-height: 40px; }
ul.egmenu ul { position: relative; }
}
@media all and (min-width: 601px) {
ul.egmenu li:hover { background: #555; }
ul.egmenu li:hover ul { display: block; }
}
@media all and (max-width: 600px) {
ul.egmenu { height: auto; }
ul.egmenu > li { float: none; width: 100%; }
ul.egmenu a { line-height: 40px; }
ul.egmenu ul { position: relative; }
ul.egmenu li.tap { background: #555; }
ul.egmenu li.tap ul { display: block; }
}
这是一个 fiddle :http://jsfiddle.net/mcxa341s/
最佳答案
删除 logo div 并使用 CSS 为页眉添加背景。
更改为:
header {
height:105px;
background: url('http://i.imgur.com/cosDXx1.png') no-repeat center;
background-color:black;
text-align:center;
}
并使用margin-top 为social div 调整定位。
更新
改变:
header .social a {
float:right;
}
对此:
header .social {
position: absolute;
right: 0;
top: 40px;
}
关于html - 标题 Div 中的多个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25475803/