-1

I'm trying to use vertical-align: middle to vertically center an inline-block element within some text.

p {
  background: red;
  line-height: 20px;
  display: block;
}

span {
  height: 18px;
  width: 18px;
  display: inline-block;
  background: lightblue;
  vertical-align: middle;
}
<p>
  <span></span>
  &lt;-- Not perfectly aligned
</p>

Notice that the element isn't perfectly centered... why is this? Is this a browser off-by-one issue? It repros on WebKit browsers (Chrome, Safari).

Rainbow
  • 6,772
  • 3
  • 11
  • 28
sir_thursday
  • 5,270
  • 12
  • 64
  • 118
  • 1
    With 4.5k rep you surely know you're supposed to include code in the question, not just send us to links to understand your problem. – Mitya Mar 14 '20 at 14:30
  • Sorry mate, haven't actually used the SO embedded code snippet before. Added. – sir_thursday Mar 14 '20 at 14:34
  • Thanks for the link-- I saw that post and I think it's a different issue. `vertical-align: middle` is "working" in my case, it just isn't pixel-perfect. FWIW, it's better in FF. – sir_thursday Mar 14 '20 at 14:40
  • 1
    related: https://stackoverflow.com/a/57832839/8620333 / https://stackoverflow.com/a/54190413/8620333 ... middle doesn't work like you think – Temani Afif Mar 14 '20 at 14:48
  • I don’t believe vertical-align achieves the effect you’re looking for. Would consider flexbox I.e. setting the parent css as: ‘display:flex’ and ‘align-items:center’ – Matt Saunders Mar 14 '20 at 14:53
  • The only other thing to try is removing the white space from your HTML I.e

    Stuff

    all on one line     – Matt Saunders Mar 14 '20 at 14:56
  • I considered flex, but it collapses whitespace, forcing me to add `white-space; pre` or some equivalent. I may be forced to go that route regardless though. – sir_thursday Mar 14 '20 at 14:57

2 Answers2

1

vertical-align: middle; was never meant to center the element. Here is a more trivial example to better see:

p {
  background: 
    linear-gradient(yellow,yellow) center/100% 1px no-repeat, /* the center */
    red;
  line-height: 80px;
  font-size:80px;
  display: block;
}

span {
  height: 18px;
  width: 18px;
  display: inline-block;
  background: lightblue;
  vertical-align: middle;
}
<p>
  <span></span>
  &lt;-- Not aligned
</p>

Aligns the middle of the element with the baseline plus half the x-height of the parent ref

Related question for more details:

How to understand the difference between vertical-align: -0.125em and vertical-align: middle?

Vertical align not working on inline-block

Vertical-align aligns everything else except self

https://stackoverflow.com/a/54190413/8620333

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
-2

Your code has comments and text is not in span. Try this:

<p>
  <span>Not perfectly aligned</span>
</p>


p {
  background: red;
}

span {
  display: inline-block;
  background: lightblue;
  vertical-align: top;
}
user3337667
  • 161
  • 1
  • 10
  • I think downvotes because you didn't understand the question. The text is not meant to be in the span. The span is supposed to be a separate square visual that demonstrates how vertical alignment isn't working properly. Also, the code has no comments in it. – sir_thursday Mar 18 '20 at 00:47
  • ok got it, but at first it was not like this, it was comment but after edit it become like it is now, nvm, no issue – user3337667 Mar 19 '20 at 01:12