Блог

У меня есть следующий фрагмент HTML:

 <ul id="downmenu">
    <li class="copyright">
        <div>amp;copy; 2011. All rights reserved.</div>
    </li>
    <li class="twitter">
        <img src="images/twitter.png" alt="" />
    </li>
    <li class="facebook">
        <img src="images/facebook.png" alt="" />
    </li>
</ul>
  

И следующий фрагмент CSS:

 #downmenu {
    font-size:14px;
    border-top: 1px solid #666;
    clear: both;
    list-style-type: none;
    margin: 20px 0;
    overflow: hidden;
    padding: 11px 0 11px 34px;
    width: 870px;   
}

#downmenu li {
    float:left;
}

#downmenu li.copyright {
    margin-right:540px;
    height:36px;
}

#downmenu li.copyright div{
    margin: auto 0;
}
  

(Я думаю) #downmenu li.copyright имеет высоту 36 пикселей, и я хочу центрировать вертикально div внутри него. Для достижения этого я использовал margin: auto 0; . Но он не центрирован.

Есть какие-нибудь подсказки?

Полностью удалите div и используйте высоту строки для центрирования текста.

Установка высоты строки равной высоте li будет центрировать ее по вертикали.

     #downmenu li.copyright {
    margin-right:540px;
    height:36px;
    line-height:36px;
}
  

Попробуйте это:

 #downmenu li.copyright {
    margin-right:540px;
    height:36px;
    display: table-cell;
    vertical-align: middle;
}
  

Вам нужно, чтобы высота строки была такой же, как высота li.

высота: 36 пикселей; высота строки: 36 пикселей;

Я вижу, что у вас есть отступы, это может изменить то, как вы видите div. Используйте что-то вроде Chrome Developer Console или firebug, чтобы увидеть, как применяется ваш CSS.