Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jack Spangenberg
643 PointsVertically aligning elements inside of a bootstrap jumbotron.
I have the following workspacee:
Keep in mind the change in color represents two different jumbotrons.
I'd like my image, "Simplism's Services" and "Services you can trust" to be vertically aligned to the center of ONLY THEIR JUMBOTRON not the entire page.
2 Answers
Ezra Siton
12,644 PointsAgain! the vertical Align is not "built-in" in CSS (before flex!!), this is why you find endless idea/tricks/and styles for the same mission (google it).
You have this property but this will not work for block element (H1, DIV....) https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
One soultion (later remove the inline-css (where you see "style=....") to your CSS file + remember to add classes to your markup):
<div class="jumbotron jumbotron-fluid jumbotron-main" id="jumbotron-1" style="position: relative;">
<div class="container" style="
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
">
<h1 class="display-3">Simplism's Services</h1>
<button type="button" class="btn btn-outline-secondary">Services you can trust</button>
</div>
</div>
```
Ezra Siton
12,644 PointsThis is not Jumbotron issue but in general "align an element to a div vertically".
In flex its really easy: https://tutorialzine.com/2015/09/quick-tip-the-simplest-way-to-center-elements-vertically-and-horizontally
If you want support for old browser's :) you have endless tricks (I hate all of them - but sometimes you most):
Jack Spangenberg
643 PointsYou lost me, would you mind forking my code and demonstrating what that would look like in the code?