52672

Centering a H1 vertically with background image at 100%

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>

Recommend

  • Get Distinct rows from a result of JOIN in SQL Server
  • How do I conditionally select a field from one of two tables?
  • CSS - how to trim text output?
  • Bootstrap collapse within a foreach loop
  • reduce/reduce conflicts using ocamlyacc
  • Table striping rows in CSS Grid
  • HALF_PTR Windows data type
  • Is it safe to accept URL parameters for populating the `url_for` method?
  • Why can't UI components be accessed from a backgroundworker?
  • Cross platform UI spacing/padding
  • ZipList with Scalaz
  • Can you pass an array from javascript to asp.net mvc controller action without using a form?
  • In C what exactly happens if i use () to initialize a double dimension array instead of the {}?
  • Magento get URL before current
  • How to split circle in to the sectors in google maps?
  • abstracting over a collection
  • Basic many-to-many left join query
  • Floated image with variable width and heading with background image
  • Django model inheritance, filtering models
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Play WS (2.2.1): post/put large request
  • Android fill_parent issue
  • Change multiple background-images with jQuery
  • MongoDB in PHP using aggregate to group by _id is null not working
  • Splitting given String into two variables - php
  • Align navbar back button on right side
  • How to draw moving and Running sine wave chart using JFree chart in java?
  • Sending data from AppleScript to FileMaker records
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • XCode can't find symbols for a specific iOS library/framework project
  • 0x202A in filename: Why?
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Getting Messege Twice Using IMvxMessenger
  • How does Linux kernel interrupt the application?
  • JaxB to read class hierarchy
  • Checking variable from a different class in C#
  • How to Embed XSL into XML