Can't align: <img> & <h1> & <img>

Hi all, this is a real newbie prob, but I just can’t get through it today.
I’ve now spent several hours on this and it is too long.
Can’t seem to work out the logic here no matter what I try or where I look.
I’m trying to put an img-h1-img on the same line. This should not be a problem.
I’m not trying to go grid or responsive, since I want the images to not distort.
Here’s a real simple example of my practice code:

    <!-- --------------------------------------------------------------------- -->
    <body>
        <section id="section-1">
            <div class="ImgContainer-dflt">
                <img id="gingerCupCorner" class="dflt-img-wrap" src="https://www.cravingsofalunatic.com/wp-content/uploads/2017/12/Gingerbread-Hot-Chocolate-7.jpg" width="150" height="175" alt="gingerManOnHotChocCup">
                <div id="test">
                <h1 class="underline">To All That Is <strong>Great!</strong> About <strong>Hot Chocolate!</strong></h1>
                </div>
                <img id="chocolateHeartSwirl" class="dflt-img-wrap" src="https://t3.ftcdn.net/jpg/01/87/19/20/240_F_187192077_V5SmoKGHT250fiHwO2nGWsRahOYKqUsB.jpg" width="150" height="150" alt="chocolateHeartSwirl">
            </div>
      </section>
  </body>
    <!-- --------------------------------------------------------------------- -->

Here’s the CSS:

html, body {
    margin: 0;
    padding: 0;
}
body {
  font-size: 100%;    
}
/* ------------------------- */
/* Image/Container settings */
/* ------------------------- */
#gingerCupCorner, #test, #chocolateHeartSwirl {
    display: inline-block;
}
.ImgContainer-dflt {
    text-align: center;
}
/* ------------------------- */
/* Styling Additions */
/* ------------------------- */
.dflt-img-wrap {
    border: 1px solid #000000;
    border-radius: 4px;
    padding: 5px;
}
h1 {
    font-size: 120%; 
}

I’ve been working this with different variations as an exercise, but am just getting nowhere!!
I can get the tags on the same line, but am Stuck with vertical centering the h1 tag, wether or not I wrap it in a div tag.
I realize that img is an ‘inline’ element and h1 is a ‘block’ element, but I thought I could put them all on the same line by changing the img’s to display: inline-block and h1 to display: inline-block as well. Nope, can’t figure it out, LOL
Is my issue just how to vertical center the h1 or is it that I should be wrapping the img’s in a div from the start?
Thanks, in advance,

If you delete the <div id='test'> and give h1 and img display inline-block. It should be working fine.
The problem is the h1 won’t center vertically.
So to make it simple, use display: flex on the parent element.

h1, img {
  display: inline-block;
}

.ImgContainer-dflt {
  display: flex;
  justify-items: center;
  align-items: center;
}

That should do it.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

Hi and thank you for the helpful reminder