Ad

Content Over Image Not Aligning Vertically

- 1 answer

I am trying to get my div container .home-img-text to center vertically in the middle of its parent div .home-img. I have tried setting .home-img-text to position: absolute, relative, I tried padding-top and a bunch of other things, it won't move at all from the top of its parent div.

This can be viewed at this site:

click here

I did not create a snippet because the image will not show with my parallex effect.

Does anyone see what is wrong?

CSS:

.home-img {
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
    vertical-align: middle;
}
.parallax-window {
    min-height: 300px;
    background: transparent;
    position: relative;
}
.home-img-text {
    position: relative;
    z-index: 99;
    color: #FFF;
    font-size: 4em;
    text-align: center;
    top: 40%;
}

HTML:

<div class="home-img">
    <div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
    <div class="home-img-text">Quality Solutions</div>
</div>

Ad

Answer

The proper way to vertically center a box model element is:

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Update: this is what happens in your page:

.grand-parent {
  position: relative;
  width: 300px;
  height: 300px;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
  border: 1px solid blue;
}
.parent {
  height: 400px;
  border: 1px solid red;
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
}
<div class="grand-parent">
  <div class="parent">
    <div class="child">Quality Solutions</div>
  </div>
</div>

To vertically center .child in .grand-parent instead of .parent remove position:relative from .parent.

Ad
source: stackoverflow.com
Ad