Я пытаюсь получить логотип с display: inline-block
и vertical-align: center
но это не работает. Вы знаете, почему и как это исправить? Большое спасибо
<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; }
ЖИЗНЬ ДЕМО ЗДЕСЬ
Теперь работает. Взгляните на мою живую демонстрацию
проблема в том, что вы используете на одном display:table
и в том же display:table-cell
класса display:table-cell
. Это неверно.
display:inline-block
правильный для того, что вам нужно, но я рекомендую вам использовать float:left
вместо этого из-за совместимости браузера, такого как IE 7, 8 и т.д. Более старый браузер не понимает, какой display:inline-block
среднее и не применяет свойства css.
Я изменил ваш код css, добавив некоторую position:relative
и top
значения.
Грег. У вашего макета страницы есть некоторые серьезные недостатки в плане структуры и CSS.
Я предлагаю вам выполнить проверку качества и удалить все избыточные css.
В любом случае, вертикальное выравнивание для элемента может быть выполнено, если оно является встроенным, а parent - td, как показано на рисунке: http://jsfiddle.net/eLSbq/6/. дисплей
display: inline
для логотипа и родителя как td-ячейки