I have two items in a header section on my page
<header>
<div id="banner">
<img width="200" src="/assets/my-club-c45b98884adb8f6c1c8afade4fc83d722cc151ce7dc7a88083bdf2b9f343c7ef.png" alt="My Club" />
<span id="pageTitle">My Centered Title</span>
</div>
</header>
I only want the content in the second element -- the span to be both vertically and horizontally centered. Following the advice here -- Flexbox: center horizontally and vertically , I tried the flex box approach and applied these styles
#banner {
background-color: #003162;
text-align: left;
}
#banner img {
display: inline-block;
}
#pageTitle {
color: #ffffff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
but my content isn't getting centered in that specific element -- https://jsfiddle.net/6fr3p6mj/1/ How do I correct for this?
