пытается плавать логотип в центре и в соответствии с навигацией

Прежде всего, я хотел бы поблагодарить всех здесь, с их помощью, по моему проекту!пытается плавать логотип в центре и в соответствии с навигацией

Я пытаюсь, чтобы логотип для сайта находился посреди ссылок навигации и проваливался чуть ниже заголовка. Моя проблема заключается в том, что, когда я (почти) достигаю этого эффекта, логотип перемещается по правому краю, а навигационные ссылки возвращаются вместе. Я пробовал много решений на этом сайте для подобных проблем, но не кубиков.

Текущее состояние моей проблемы можно найти здесь: Site

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>

Можно ли добиться этого эффекта, сделав его фон какой-то?

источник

2013-05-30 Truffleshfl

, где именно вы хотите логотип быть? В середине ссылок навигации, но ниже заголовка? – Jawad

Удалить position:absolute из nav li a img и добавить vertical-align:middle к nav li a

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

DEMO

источник

2013-05-30 07:17:46 Sowmya

Удивительный, но есть ли способ, чтобы этот логотип частично перекрывался с содержимым div, почти так же, как у меня, пытаясь уменьшить высоту этой панели навигации. Кажется, занимает слишком много места при просмотре на мобильном телефоне. Большое вам спасибо за вашу помощь! – Truffleshfl

Если вы хотите пересечь div, просто поместите более большой атрибут «top» для логотипа и переопределите атрибут «высота», чтобы уменьшить его. Btw, для мобильных устройств, вы можете использовать «медиа-запросы» – Xaltar

Попробуйте использовать абсолютную позицию для тега и относительно тега li – Sowmya

пытается плавать логотип в центре и в соответствии с навигацией

ответ

Смежные вопросы