vertical align image and two lines of text-CodePudding

I have the below code, where an image is correctly vertically aligned with a lines of text. but when i try to make it two lines, its not all vertically centered.

this is my current code for one sentence:

    <div >
        <img src="https://i.imgur.com/5CEiuNs.png"/> one sentence
    </div>

<pre>
.container{
    font-size:20px;
}
.container img{
    height: 1.2em;
    vertical-align: middle;
}
</pre>

https://jsfiddle.net/euvszf5o/

and this is when I try to add a second line:

    <div >
    <img src="https://i.imgur.com/5CEiuNs.png"/>
    <span>
      one sentence
      <br/>
      second sentence
    </span>
</div>

<pre>
.container{
    font-size:20px;
}
.container img{
    height: 1.2em;
    vertical-align: middle;
}
</pre>

https://jsfiddle.net/9sdtqp85/

and this is how i want it to look: https://i.imgur.com/OCizehv.png

CodePudding user response：

You just need to play with fontsize a bit to fine tune it now :)

.container {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 20px;
}

.container img {
  height: 1.2em;
}

.container span {
  line-height: 0.8
}

<div >
  <img src="https://i.imgur.com/5CEiuNs.png" />
  <span>
    one sentence
    <br/>
    second sentence
  </span>
</div>