1

首先，我要感谢大家对我的这个项目的帮助！

我试图让网站的徽标位于导航链接的中间，并在标题下方稍稍下降。我的问题是，当我（几乎）实现此效果时，徽标会向右移动，并且导航链接会重新组合在一起。对于类似的问题，我已经尝试了该站点上的许多解决方案，但没有骰子。

我的问题的当前状态可以在这里找到：网站

CSS：

  nav {
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: auto;
    padding: 0px;
    border-bottom: 4px solid #291e13;
    background:url(../../img/black_paper.png);
    background-color:#FFF;
        -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    z-index:1;
    list-style:none;
    text-align:center;
    font-family: Conv_goudy_bookletter_1911-webfont;
    font-weight:bold;
}

nav li {
    display: inline;
}

nav li a {
   display: inline-block;
   padding: 10px;    
       font-family: 'Oswald', sans-serif;    
       font-size: 16px;
       text-transform: uppercase;
       text-decoration: none;
       color: #fff;
       vertical-align:central;
       text-shadow: 1px 2px rgba(0, 0, 0, .2);
       -webkit-transition: color .3s linear;
       -moz-transition: color .3s linear;
       -o-transition: color .3s linear;
       -ms-transition: color .3s linear;
       transition: color .3s linear;
}


nav li a:hover {
  color:#F30;
}


nav li a img {
     display:inline-block;
     position: absolute;
     top: 25px;
     margin: 0 auto;
}

和 HTML：

<div id="headercontainer">
        <nav>
            <ul>
                <li><a class="homelink anchorLink" href="#home">Home</a></li>
                <li><a class="aboutlink anchorLink" href="#about">About</a></li>
                <li><a id="plan9Logo" class="homelink anchorLink" href="#home"><img src="img/logo.png" width="133" height="133"></a></li>
                <li><a class="menulink anchorLink" href="#menu">Menu</a></li>
                <li><a class="contactlink anchorLink" href="#contact">Contact</a></li>
            </ul>               
        </nav>

    </div>

是否可以通过使其成为某种背景来达到这种效果？

4

1 回答 1

2

删除position:absolute并nav li a img添加vertical-align:middle到nav li a 

nav li a img {
display:inline-block;
top: 25px;
margin: 0 auto;
}

演示

于 2013-05-30T07:17:46.710 回答