Почему встроенный блок не работает в этом случае, чтобы центрировать вертикально?

0

Я пытаюсь получить логотип с display: inline-block и vertical-align: center но это не работает. Вы знаете, почему и как это исправить? Большое спасибо

http://jsfiddle.net/eLSbq/

<div class="header">
<div class="logo">Logo</div>                            
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    </ul>
</li>
<li><a href='#'>Link 2</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
<li><a href='#'>Link 3</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
</ul>
        </div>


.header {
    width: 100%;
    background: #fff;
    color: #124191;
    font-weight: 300;
    font-size: 28px;
    height: 120px;
    display: table;
     position: fixed;
        z-index: 999999;
        opacity: 0.7;
    background: aqua;
}

.logo {
display: inline-block;
vertical-align: middle;
left:0;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
background: red;
}

 .drop_menu {
    padding:0;
    margin:0;
    list-style-type:none;

    right: 0;
    display: table;
    z-index: 3000;
       display: table-cell;
    vertical-align: middle;
    right: 0;

}


.drop_menu li { display: table-cell;
    vertical-align: middle; float: right;}

.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#666;
    text-decoration:none;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;



}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }
Теги:

2 ответа

1
Лучший ответ

ЖИЗНЬ ДЕМО ЗДЕСЬ

Теперь работает. Взгляните на мою живую демонстрацию

проблема в том, что вы используете на одном display:table и в том же display:table-cell класса display:table-cell. Это неверно.

display:inline-block правильный для того, что вам нужно, но я рекомендую вам использовать float:left вместо этого из-за совместимости браузера, такого как IE 7, 8 и т.д. Более старый браузер не понимает, какой display:inline-block среднее и не применяет свойства css.

Я изменил ваш код css, добавив некоторую position:relative и top значения.

  • 0
    Спасибо! В вашем jsfiddle элементы не выглядят идеально вертикально выровненными, есть ли причина для этого? Спасибо
  • 0
    да, это так ... потому что я добавил положение: относительно вашего div и управляю им с помощью свойства css top ... теперь вы можете управлять им, как вы хотите изменить верхние значения. например: сверху: 30px, сверху: 40px.
Показать ещё 1 комментарий
1

Грег. У вашего макета страницы есть некоторые серьезные недостатки в плане структуры и CSS.

Я предлагаю вам выполнить проверку качества и удалить все избыточные css.

В любом случае, вертикальное выравнивание для элемента может быть выполнено, если оно является встроенным, а parent - td, как показано на рисунке: http://jsfiddle.net/eLSbq/6/. дисплей

display: inline

для логотипа и родителя как td-ячейки

Ещё вопросы

Сообщество Overcoder
Наверх
Меню