0

Caveat, I'm very unfamiliar with CSS. I'm probably misusing vertical-align. I made this very simple example of a problem which I ran into. In the following snippetsI apply vertical-align to Block 1, however it is block 2 which gets centered. (Snippet two has vertical-align removed to see the effect.)

Why exactly is happening?

<div style="background-color: gray; height:200px;">
  <div style="display: inline-block; background:green; height:200px; vertical-align:middle">Block 1</div>
  <div style="display: inline-block; background:red">Block 2</div>
</div>

<div style="background-color: gray; height:200px;">
  <div style="display: inline-block; background:green; height:200px;">Block 1</div>
  <div style="display: inline-block; background:red">Block 2</div>
</div>
huggie
  • 17,587
  • 27
  • 82
  • 139
  • How exactly do you expect vertical align to work on an element that has the exact same height as its parent? – Jay Aug 20 '19 at 08:42
  • normally you use vertical align for the items in a div where the div has `display: inline-block;` – xmaster Aug 20 '19 at 08:53
  • @xmaster You mean the parent div has should be an inline-block? – huggie Aug 20 '19 at 09:45
  • @Jay Except it doesn't. I'm referring to block 2. My question is why a CSS property set for block 1 is affecting block 2. But let me check other links for possible duplicates. – huggie Aug 20 '19 at 09:46
  • @huggie yes thats what i meant – xmaster Aug 20 '19 at 09:49
  • OK the `Vertical-align aligns everything else except self` explains it for me. Thanks. – huggie Aug 20 '19 at 10:02

0 Answers0