52672
Question:
I'm trying to get a H1 vertically center aligned within a div that has a background image.
I tried this method I found: <a href="https://jsfiddle.net/vdqdpyc0/12/" rel="nofollow">https://jsfiddle.net/vdqdpyc0/12/</a>
But found that the full height of the banner was only visible if I specifically added a px height to the div, or added padding to either element. This meant that when I resized, there was lots of white space above and below the banner. This wouldn't be an issue if the background was intended to repeat, but it isn't.
The end product needs to look <a href="https://i.stack.imgur.com/4pUC1.jpg" rel="nofollow">like this</a>.
<pre class="snippet-code-css lang-css prettyprint-override">html,
body {
height: 100%;
}
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
background-size: cover;
max-height: 360px;
height: 100%;
}
.inner-wrapper {
display: table;
width: 100%;
height: 100%;
}
.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1 {
color: #fff;
}
<pre class="snippet-code-html lang-html prettyprint-override"><div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
Vertically aligned text
</div>
</div>
</div>
I could go through reducing the padding for various responsive viewpoints, but I figured there has to be a more streamlined way of going about it.
Answer1:You can achieve this much more easily these days with flexbox, e.g.
<pre class="snippet-code-css lang-css prettyprint-override">html,
body {
height: 100%;
}
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
color: #fff;
}
<pre class="snippet-code-html lang-html prettyprint-override"><div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
Vertically aligned text
</div>
</div>
</div>
Example: <a href="https://jsfiddle.net/0yxctLne/" rel="nofollow">https://jsfiddle.net/0yxctLne/</a>
Answer2:You can use a flexbox for this. <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow">Here</a> is a pretty simple guide to flexbox. For your issue, it should be enough to pass
display: flex;
flex-direction: column;
justify-content: center;
to the element surrounding the H1 tag, IF the surrounding element is the same height and width as the space you want the H1 tag to be centered in. This will define the main axis as vertical (read: column) and then center all content along the main axis. If you want, you can also add
align-items: center;
to have the text centered along the cross axis (as in horizontally).
Answer3:Do you need something like this? Flexbox is a nice way to do:
<pre class="snippet-code-css lang-css prettyprint-override">.header-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
background-size: cover;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
color: #fff;
}
<pre class="snippet-code-html lang-html prettyprint-override"><div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
Vertically aligned text
</div>
</div>
</div>
<a href="https://jsfiddle.net/vdqdpyc0/20/" rel="nofollow">Fiddle</a>
![Exception Using PayPal-PHP-SDK [Http response code 400]](/skin/wt/img/t.gif)