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,