html - 垂直对齐到父级的中间

Question

我试图将 2 个内联 block 元素垂直对齐到其父元素的中间。不幸的是，当我给两个元素 vertical-align: middle 时，其中一个稍微对齐到中间，而另一个则没有。这是我的 jsFiddle .

HTML

CSS

html,
body {
  margin: 0;
}

.navContainer {
  width: 100%;
  height: 60px;
  background-color: white;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.19);
}

.navBar {
  width: 90%;
  display: block;
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
}


.lineMenu {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.logo {
  display: inline-block;
  width: 120px;
  vertical-align: middle;
  margin-left: 35px;
}

.logo img {
  width: 100%;
}

如何使两个元素都在其父元素的中间对齐？

Answer 1

你会踢自己的答案太简单了;)

您需要做的就是将 .logo img 设置为 display: block:

.logo img {
  display: block;
}

html,
body {
  margin: 0;
}

.navContainer {
  width: 100%;
  height: 60px;
  background-color: white;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.19);
}

.navBar {
  width: 90%;
  display: block;
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
}


/*Line menu CSS*/

.lineMenu {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.logo {
  display: inline-block;
  width: 120px;
  vertical-align: middle;
  margin-left: 35px;
}

.logo img {
  width: 100%;
  display: block;
}

<div class='navContainer'>
  <div class='navBar'>
    <div class="lineMenu" onclick="menuToggle(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
    <div class='logo'>
      <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png'>
    </div>
  </div>
</div>

我创建了一个工作 fiddle 来展示这个 here .

希望对您有所帮助! :)