的更新

Question

我希望徽标在中心对齐，而社交媒体按钮在标题右侧对齐。我该如何实现？我已经能够将其与我的导航栏对齐，但这不是我想要的。任何帮助，将不胜感激。

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;  }
}

这是一个小提琴：http://jsfiddle.net/mcxa341s/

Answer 1

将徽标设为标题的背景，并删除徽标div。然后，您的社交媒体图标将毫无问题地对齐。
将position:absolute用于社交媒体。

.social { 位置：绝对; 右：20px; 上：50px; }

Answer 2

删除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来调整定位。

<强> JSFiddle Demo

的更新

变化：

header .social a { float:right; }

对此：

header .social { position: absolute; right: 0; top: 40px; }

JSFiddle Demo

Answer 3

<强> CSS：

body {
    margin:0px;
    padding:0px;
}
header {
    height:105px;
    background-color:black;
    text-align:center;
}
header .logo{ margin: 0 auto;}
header .social{margin-top:-24px;}
header img{
    display:inline-block;

}

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;  }
}

JSFiddle Demo

标题Div中的多个图像

3 个答案:

的更新