htmlcsssvg

Vertical-align: middle is completely off with inline SVG icon

I am having a very hard time trying to vertically center SVG icons with text:

.text {
  display: inline;
  vertical-align: middle;
  font-size: 42px;
  line-height: 42px;
  font-family: "Montserrat";
  font-weight: 900;
}

.icon {
  display: inline;
  vertical-align: middle;
  line-height: 42px;
}

svg {
  width: 16px;
  height: 16px;
  display: inline;
  vertical-align: middle;
}
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="212 -791.77 536 627.77"><path d="M264-216h109.85v-237.69h212.3V-216H696v-348L480-726.77 264-564v348Zm-52 52v-426l268-201.77L748-590v426H534.15v-237.69h-108.3V-164H212Zm268-307.38Z"></path></svg>
  </div>
</div>

See the result here: https://codepen.io/orobert91/pen/raNGmjW

enter image description here

The icon is completely off. What am I missing with vertical-align? Is this CSS attribute just broken with SVGs?

Note that the SVG icon MUST be wrapped and using display: flex is not an option.

Solution

  • You have a lot of useless styles. All you need is the below.

    Note that middle may not have the effect your are looking for. It will slightly move the icon.

    .text {
  font-size: 42px;
  line-height: 1;
  font-family: "Montserrat";
  font-weight: 900;
}

.icon {
  display: inline;
}

svg {
  width: 16px;
  aspect-ratio: 1;
  vertical-align: middle;
}
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="212 -791.77 536 627.77"><path d="M264-216h109.85v-237.69h212.3V-216H696v-348L480-726.77 264-564v348Zm-52 52v-426l268-201.77L748-590v426H534.15v-237.69h-108.3V-164H212Zm268-307.38Z"></path></svg>
</div>
</div>

    If you want a perfect alignment inside the line

    .text {
  font-size: 42px;
  line-height: 1;
  font-family: "Montserrat";
  font-weight: 900;
}

.icon {
  display: inline;
}

svg {
  width: 16px;
  aspect-ratio: 1;
  vertical-align: bottom;
  translate: 0 calc(50% - .5lh)
}
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="212 -791.77 536 627.77"><path d="M264-216h109.85v-237.69h212.3V-216H696v-348L480-726.77 264-564v348Zm-52 52v-426l268-201.77L748-590v426H534.15v-237.69h-108.3V-164H212Zm268-307.38Z"></path></svg>
</div>
</div>