0

I have the following markup: 

<div class="container">
  <div class="grandparent">
    <span>Hello World</span>
    <div class="parent">
      <div class="child">
        <i class="fa fa-star fa-5x"></i>
        <span>Good For Yoouuu...</span>
      </div>
    </div>
  </div>
</div>

And this CSS:

.container {
  position: relative;
  height: 350px;
  /*This is unknown, set here for example purposes */
}
.grandparent {
  height: 100%;
  border: 1px solid black;
}
.parent {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child span {
  display: block;
}

That doesn't seem to take into account the span element outside of the .parent element.

How can I vertically center the child div in the container, regardless of the competing span element, without setting an explicit height?

Here is a fiddle: https://jsfiddle.net/15hgwu54/

Edit: I don't think this is a duplicate of the proposed question because that one doesn't take into account elements that compete for space inside the container. The solutions in the linked question would work if the only element were the .parent div, but since there is also a span taking up space, those answers don't properly center the .parent div.

Dryden Long
  • 10,072
  • 2
  • 35
  • 47
  • relative measurements like `100%` go off the height of the container. they don't accomodate "sibling" elements. so two 100% height divs within a container will both get 100% of the height of the container (e.g. total height = 200%), not 50% of the parent. – Marc B Sep 09 '16 at 19:24
  • put `border: 1px solid red;`on the `.parent` and you'll get a hint of what's going on. – Winter Sep 09 '16 at 19:25
  • @Winter I see what is going on and understand that the element is leaving the boundary of the container. What I don't know is how to adjust for that without knowing the height of the first `span` element – Dryden Long Sep 09 '16 at 19:29
  • 1
    Is this what you're looking for @DrydenLong? https://jsfiddle.net/15hgwu54/1/ – UncaughtTypeError Sep 09 '16 at 19:30
  • @UncaughtTypeError Changing my previous comment, that doesn't seem to truly center the div either. I've updated my question to be more clear I think – Dryden Long Sep 09 '16 at 19:37
  • 2
    Ok... the real reason that it is not doing what you want is that you have absolutely positioned the parent element, but not told it where to start, therefore it starts after the span. Put `top: 0` on the `.parent` and see if it behaves the way you want. – Winter Sep 09 '16 at 19:38
  • @Winter Can't believe I missed that... Post it as an answer so I can accept it. Thanks! – Dryden Long Sep 09 '16 at 19:41
  • 1
    No problem :) I can't seem to answer it, probably because it is marked as a duplicate, but that's ok. – Winter Sep 09 '16 at 19:44
  • 1
    @DrydenLong I must admit, I was a tad confused when you mentioned it wasn't quite centered, then I realized I sent you the wrong link, my initial fiddle had the exact same solution Winter suggested; just adding `top: 0` to `.parent`. Oh well, that's what I get for being too hasty :) – UncaughtTypeError Sep 09 '16 at 19:44
  • You are just missing `top:0px;` in your `.parent` class. – Sidharth Gusain Sep 09 '16 at 19:45
  • You can also fix your issue using flexbox (not compatible with old browser) https://jsfiddle.net/15hgwu54/3/ – Luke Sep 09 '16 at 19:47

0 Answers0