Struggling to center text over a div with percentage width and height? Flexbox didn't work out, so I turned to a tutorial for guidance: http://jsfiddle.net/4be9cp23/. Here's the code snippet from the tutorial:
html
<div id="header">
<h1>Home</h1>
</div>
CSS
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
}
#header h1{ display:inline-block; }
View the demo I'm working on here http://codepen.io/maureenv/pen/dMEPap?editors=1100. Trying to center white text over an image of a dragon without affecting other elements.
Followed the tutorial but struggling with: HTML
<div class="masthead-container">
<img src="http://maureenvogel.com/images/charizard.jpg" class="masthead-img">
<div class="quote-container">
<div class="quote"> "This is my quote that won't center no matter what I do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. " </div>
<div class="quote-author"> -quote by me</div>
</div>
</div> <!-- close masthead container div -->
CSS
.masthead-container .masthead-img{
width: 100%;
top: 0;
left: 0;
display: block;
position: relative;
}
.masthead-container {
text-align: center;
vertical-align: middle;
}
.masthead-container .quote-container{
display: inline-block;
}
.quote-container{
top: 0;
left: 0;
color: white;
position: absolute;
text-align: center;
width: 100%;
}
The text stubbornly refuses to center, and display-inline block isn't cooperating. Seeking assistance. Much appreciated!