noclist noclist - 6 months ago 16
HTML Question

vertical align text in a div - responsive to window resize

I have some vertically aligned text in a div that I want to remain vertically centered when the browser resizes. As the div shrinks with the browser, my text becomes offset towards the bottom of the div.
Any suggestions?

Here is a Fiddle of the issue I'm experiencing.

HTML:

<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>


CSS:

.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat left top;
background-size: 100% auto;
height: 360px;
}

.inner-wrapper {
display: table;
width: 100%;
height: 360px;
}

.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}

h1 {
color: #fff;
}

Answer

Is this what you're looking for?

Updated fiddle

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: 100% auto;
  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: black;
}
<div class="outer-wrapper">
  <div class="inner-wrapper">
    <div class="header-wrapper">
      <h1>
        Vertically aligned text
      </h1>
    </div>
  </div>
</div>