Question

我有以下结构/代码：

＆＃13;

.navbar__brand, .navcontainer { 
float:left;
}

.navbar__brand img {
vertical-align:middle;}
          
.navbar__menu { 
display:inline-block;
}

.navbar__menu li {
display:inline-block;
list-style: none;

}

＆＃13;

<div class="header">
    <div class="navbar">
        <div class="navbar__brand">
        <a href=#> <img src="../img/logo.png"> </a>
        </div>
        <div class="navcontainer">
          <ul class="navbar__menu">
              <li><a href=#>Item 1</a></li>
              <li><a href=#>Item 2</a></li>
          </ul>
        </div>
    </div>
</div>

＆＃13;

我希望navbar__brand中的图像在中间垂直对齐; 此刻在div的顶部对齐。

我需要支持旧的IE浏览器，所以请不要弯曲。

Answer 1

实现这一目标的最简单方法是模拟表格

.asTable{
display:table;
}

.asTR{
display:table-row;
}

.asTD{
display:table-cell;
vertical-align:middle;
border:1px solid;
}
.asTD ul{
list-style:none;
}

.asTD ul li {
display:inline-block;
}

<div class="asTable">
    <div class="asTR">
        <div class="asTD">
          <a href=#> <img src="../img/logo.png"> </a>
        </div>
        <div class="asTD">
          <ul class="">
              <li><a href=#>Item 1</a></li>
              <li><a href=#>Item 2</a></li>
          </ul>
        </div>
    </div>
</div>

Answer 2

（编辑）感谢@TemaniAfif指出您需要支持旧的IE浏览器。这个答案在旧浏览器中不起作用。

像往常一样，使用经典CSS（浮点数，内联块，clearfix等）实现的痛苦是轻而易举的Flex：

.navbar {
  display: flex;
  align-items: center;
  border: blue dashed 2px;
}

ul.navbar__menu {
  display: flex;
}

.navbar__menu li {
  list-style: none;
  padding: 10px;
}

<div class="navbar">
  <div class="navbar__brand">
    <a href=#> <img src="../img/logo.png"> </a>
  </div>

  <ul class="navbar__menu">
    <li><a href=#>Item 1</a></li>
    <li><a href=#>Item 2</a></li>
  </ul>
</div>

在浮动元素的中间对齐图像，获得父高度

2 个答案: