Vertically Centering Text in Jumbotron - Height won't inheirit

Question

I want the text in the .jumbotron div to be pushed down half way between the div, instead of hovering towards the top. I am opting to use padding-top: 50%. Instead, it's centering halfway down the entire page, not halfway down the div. http://jsfiddle.net/Lvegtyvo/

The height of the div is determined by the viewport size, so it is not a definite number. I set the height in #jumbotron-header to be inherited from the parent .jumbotron, but it's ignoring the inherited height and still centering 50% down the entire page.

Does anyone have any idea why the height is not being inherited? Does it have to do with using vh as the height instead of a solid number?

HTML

<div class="jumbotron text-center img-responsive" id="jumbotron">
    <div id="jumbotron-header">
        <h1>test</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
    </div>
</div>

CSS

.jumbotron {
    background: url(images/jumbo.png) no-repeat center;
    background-size: cover;
    min-width: 100%;
    min-height: 100vh;
    margin-bottom: 0 !important;

}

#jumbotron-header{
    height: inherit;
    padding-top: 50%;
}

try vertical-align: middle also check this post out: http://stackoverflow.com/questions/10968726/how-to-verticaly-align-into-the-center-of-the-content-of-a-div-with-defined-widt — Calvin H. Chueh, Sep 29 '15 at 04:52
https://css-tricks.com/forums/topic/vertically-center-with-bootstrap/ — G.L.P, Sep 29 '15 at 04:57
thanks calvin. i would have loved to use vertical-align: middle, but it didn't seem to work when I initially tried it out — , Sep 29 '15 at 04:58
thanks for the resources, but id also like to figure out why the inherit property is not working correctly. — , Sep 29 '15 at 05:04

score 0 · Answer 1 · answered Sep 29 '15 at 05:23

Not sure but i think use of padding value in % makes the jumborton header to go 50% down if you see in the below snippet that when removing padding of .jumborton and adding the padding value in px in #jumborton-header it makes the text to be in center and height is also inherit.

If you want to see than see the below snippet

.jumbotron {
  background: url(images/jumbo.png) no-repeat center;
  background-size: cover;
  min-width: 100%;
  height: 100vh;
  border: 1px solid green;
  padding: 0!important;
}
#jumbotron-header {
  border: 1px solid red;
  height: inherit;
  padding-top: 50px;  
  padding-bottom: 50px;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="jumbotron text-center img-responsive">
  <div id="jumbotron-header">
    <h1>test</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
  </div>
</div>

score 0 · Answer 2 · answered Sep 29 '15 at 09:30

If you give padding-top in %, it will calculate according to its width, instead of its height. That's why it did not become vertically center. Instead of padding, you can use following for the vertical alignment of the inner div.

display:table for outer div.

Then display:table-cell and vertical-align:middle for inner div

.jumbotron {
    background: url(images/jumbo.png) no-repeat center;
    background-size: cover;
    min-width: 100%;
    min-height: 100vh;
    margin-bottom: 0 !important;

    display: table;

}

#jumbotron-header{
    display: table-cell;
    vertical-align: middle;
}

Vertically Centering Text in Jumbotron - Height won't inheirit

2 Answers2