CODEWITHSUNDEEP
htmlcss
noclist
noclist

Reputation: 1819

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;
}

Upvotes: 1

Views: 2682

Answers (3)

Asons
Asons

Reputation: 87262

Is this what you're looking for?

The text actually does center, though the background image doesn't, hence it looks like it doesn't, so here is 2 versions (fiddle use background-size: cover) where image centers too

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>

Upvotes: 2

BlueCaret
BlueCaret

Reputation: 5020

Your problem isn't actually that your text isn't centered, because it is. Your actual issue is that your image doesn't have enough height at that size to fill the height of the container.

See the screenshot below, here I have used the element inspector to highlight the "outer-wrapper" which is the blue box you see. Notice the text is centered within it.

Screenshot of outer-wrapper

So to tackle the actual issue which is the image either needs to fill the div or needs to stay centered itself.

To stay centered add the following to the outer-wrapper: (Fiddle)

background-position: center;

To fill the div, remove the background-size from outer-wrapper and add this: (Fiddle)

background-position: center;
background-cover: cover;

Upvotes: 0

TeT Psy
TeT Psy

Reputation: 341

The problem is your background, the div is staying the same size and the text is staying centered, you background makes it seem not so. Like Gavin said use background-size cover.

Upvotes: 0

Related Questions