0

vertical-align: middle means the image's vertical center is lined up with the adjacent text's baseline. I need to line up the text's center with the image's center. Is this possible with just CSS? Trying to set line height on the adjacent text has proved futile as the image just realigns to compensate for it and none of the built in vertical-align values do what I need.

Tahsis Claus
  • 1,879
  • 1
  • 15
  • 27

2 Answers2

1

put the text into a <span> element and give that vertical-align: middle, too

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • I need the top level siblings to have `display: inline-block` as they have `width` defined. The problem with inline-block is that the rendering engine is smart enough to traverse its text children and still determine the outer inline-block's baseline from its children. I can mess with css properties like `position` to prevent that text child traversal/calculation, but then the rest of my text can no rely on it either and I have to add more styling (I have 3 elements: img span input, and need span and input to have same baseline and img vertical center to align with span's center). – Tahsis Claus Mar 24 '17 at 18:12
0

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

According to MDN specs there is no vertical-align value that will do what I want. In-depth explanation of what the renderer is doing when aligning elements: Why is this inline-block element pushed downward?.

Community
  • 1
  • 1
Tahsis Claus
  • 1,879
  • 1
  • 15
  • 27