垂直对齐到父级的中间

Question

我正在尝试将 2 个内联块元素垂直对齐到其父元素的中间。不幸的是，当我给两个元素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>

我创建了一个工作小提琴来展示这个here。

希望这会有所帮助！ :)

Answer 2

您可以只将图像放在汉堡菜单旁边，然后vertical-align 将按预期工作。

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%;
}

<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>
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png' class="logo">
  </div>
</div>

您还可以将父级设置为display: flex 并使用align-items: center 垂直居中。

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: flex;
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
  align-items: center;
}


/*Line menu CSS*/

.lineMenu {
  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 {
  width: 120px;
  margin-left: 35px;
}

.logo img {
  width: 100%;
}

<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>
     <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png' class="logo">
  </div>
</div>