CODEWITHSUNDEEP
htmlcss
divHelper11
divHelper11

Reputation: 2208

Display block inside of inline block

I have two images, one is on the left, second on the right. When i try to add two buttons in the middle between them, the right picture goes to the bottom and left to the top, I cant fix this. Could anyone advice me please? The elements are not so big, they can easily stand in one line. The buttons should be one under another. Could someone advice me please?

HTML

<img src="/boh/boh/public/img/angel wing.jpg" class="wings" id="leftWing">
<button class="buttons">Login</button>
<button class="buttons">Register</button>
<img src="/boh/boh/public/img/devil wing.jpg" class="wings" id="rightWing">

CSS

#leftWing {
  margin-right: -4vw;
  display: inline-block;
}
#rightWing {
  margin-left: -4vw;
  display: inline-block;
}
.buttons {
  margin: 1.2vh 0;
  height: 2.4vh;
  width: 4.5vw;
  text-align: center;
  display: block;
}

Upvotes: 1

Views: 705

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240938

You could wrap both of the button elements and then set the parent wrapper element's display to inline-block:

.button-wrapper,
.wings {
  display: inline-block;
}
.buttons {
  display: block;
  margin: 0.4em auto;
}
<img src="//placehold.it/200" class="wings" id="leftWing" />
<div class="button-wrapper">
  <button class="buttons">Login</button>
  <button class="buttons">Register</button>
</div>
<img src="//placehold.it/200" class="wings" id="rightWing" />

Upvotes: 1

Related Questions