I am unable to figure out how to vertically center my ‘div within a div’. I would like to have my portraitImage displayed inline with portraitTitle. Portrait title contains H1 and H4. I have them displaying inline how I want, but the problem is I can’t get the spacing on the H1 and H4 nice and tight without throwing my portraitTitle box out of alignment. I don’t understand why the portraitTitle is being bumped down below the header container.
- Keep spacing between H1 and H4 tight without bumping the portraitTitle div down. I have tried setting H1 and H4 margin to 0 which tightens up the spacing, but it seems to knock everything out of position.
- Is there a way to lock a div so child elements can’t ‘knock it around’?
I have played around with the margins and everything just seems to break. The code I have posted results in the portraitTitle being bumped down below the container of header
<main>
<header>
<img class="portraitImage" src="altonbrown-portrait.jpg" alt="Alton Brown's Mug">
<div class="portraitTitle">
<h1>Alton Brown</h1>
<h4>Chef. Actor. Entrepreneur, to name a few things.</h4>
</div>
</header>
h1{
font-size: 2.5em;
font-family: Merriweather, serif;
background-color: khaki;
margin-bottom: 0;
}
h4{
background-color: khaki;
margin-top: 0;
}
main {
background-color: white;
width: 75%;
height: 75%;
margin:auto;
border-color: black;
border-style: solid;
border-width: 1px;
border-radius: 5px;
}
header{
background-color: blue;
height: 125px;
}
.portraitTitle{
display: inline-block;
background-color: red;
height: 100%;
}