CODEWITHSUNDEEP
htmlcss
user2896120
user2896120

Reputation: 3282

Vertical align to middle of parent

I am trying to vertical align 2 inline-block elements to the middle of its parent element. Unfortunately, when I give the two elements vertical-align: middle, one of them slightly aligns to the middle while the other does not. Here's my 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%;
}

How do I make it so that both elements are aligned in the middle of their parent element?

Upvotes: 0

Views: 85

Answers (2)

Michael Coker
Michael Coker

Reputation: 53709

You can just have the image adjacent to the hamburger menu, then vertical-align will work as expected.

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>

You can also set the parent to display: flex and use align-items: center to center vertically.

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>

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42354

You'll kick yourself the answer is so simple ;)

All you need to do is set .logo img to 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>

I've created a working fiddle showcasing this here.

Hope this helps! :)

Upvotes: 1

Related Questions