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:

    <!-- --------------------------------------------------------------------- -->
        <section id="section-1">
            <div class="ImgContainer-dflt">
                <img id="gingerCupCorner" class="dflt-img-wrap" src="" 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>
                <img id="chocolateHeartSwirl" class="dflt-img-wrap" src="" width="150" height="150" alt="chocolateHeartSwirl">
    <!-- --------------------------------------------------------------------- -->

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.


Hi and thank you for the helpful reminder