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

CSS

Posted by Jack Spangenberg
Jack Spangenberg
643 Points

What is wrong with my code?

I am trying to have a jumbotron with vertically-centered items in a column like fashion so everything is centered horizontally and in a row vertically if that makes sense. My code just doesn't want to work.

<!DOCTYPE html>

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

    <title>
    </title>
</head>

<body>
    <link href="prism.css" rel="stylesheet">
    <link href="main.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <div class="nav-bg">
        <div class="container">
            <nav class="navbar navbar-toggleable-sm navbar-inverse">
                <a class="navbar-brand" href="#">smocksCODE</a>

                <div class="collapse navbar-collapse justify-content-end" id="navCollapse">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">HTML</a>
                        </li>


                        <li class="nav-item">
                            <a class="nav-link" href="#">SCSS</a>
                        </li>


                        <li class="nav-item dropdown">
                            <a class="nav-link" href="#">JS</a>

                            <div aria-labelledby="dropdown01" class="dropdown-menu">
                                <a class="dropdown-item" href="#">Profile</a> <a class="dropdown-item" href="#">Log Out</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

    <div class="header">
        <div class="jumbotron" style="background-image: -webkit-linear-gradient(315deg,#271b38,#563d7c,#7952b3); width: 100%; border-radius: 0; color: white; height: 500px;">
            <i class="fa fa-code fa-3x fa-border"></i>

            <h3 class="display-3" style="vertical-align: middle;">smocksCODE</h3>

            <div aria-label="buttons" class="btn-group" role="group">
            <button class="btn btn-warning" type="button">Download</button> <button class="btn btn-primary" type="button">View Code</button>
            </div>
        </div>
        </div>
    <style>

    .nav-bg {
    background-color: #34495e;
    }

    .nav-link {
    margin: 5px 0;
    }

    .navbar-inverse .navbar-toggler {
    border-color: transparent;
    cursor: pointer;
    }

    .header { vertical-align: middle; }


    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js">
    </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
    </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
    </script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js">
    </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
    </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
    </script>
</body>
</html>

3 Answers

Ezra Siton
Ezra Siton
12,644 Points

First: "vertical-align: middle;" wont work on "block" elements (h1, div, and so on) https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

You don't have built in CSS property for aligning to the middle block elements (only "tricks" like Flex box - google it). http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html

If you want to use flex this will work for you (remember to add a "wrapper" like this code-example" - you want to center the icon + text + buttons as a group + text-align:center if you want to get center-center layout)

<style>
// Apply this CSS to the parent of the child you want centered
.vertical-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

</style>

   <div class="header" >
<!-- add text-align: center" to .jumbotron center horizontally -->
        <div class="jumbotron vertical-center" style="background-image: -webkit-linear-gradient(315deg,#271b38,#563d7c,#7952b3); width: 100%; border-radius: 0; color: white; height: 500px; text-align:center">
            <!-- add wrapper - this is the child you want centered -->
              <div class="new-wrapper">
             <i class="fa fa-code fa-3x fa-border"></i>

            <h3 class="display-3" style="vertical-align: middle;">smocksCODE</h3>

            <div aria-label="buttons" class="btn-group" role="group">
            <button class="btn btn-warning" type="button">Download</button> <button class="btn btn-primary" type="button">View Code</button>
            </div>
</div>
        </div>
        </div>
Jack Spangenberg
Jack Spangenberg
643 Points

Worked like a charm. Thanks!

martinjones1
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points
martinjones1
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points

Hi,

The first thing I would change is to move the CSS to the head section, remove the duplicate bootstrap CSS file and then lastly ensure that you load your own custom CSS after the bootstrap file like below:

<!DOCTYPE html>

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="prism.css" rel="stylesheet">
    <link href="main.css" rel="stylesheet">
</head>
<body>

This should hopefully get you a little bit closer to debugging the CSS.

Jack Spangenberg
Jack Spangenberg
643 Points

I'm not using most of that CSS. I just need to know why me elements aren't centering.

Ezra Siton
Ezra Siton
12,644 Points
Ezra Siton
Ezra Siton
12,644 Points

Mark as best Q to close this issue. Thanks :)!

Also in the future use more semantic Q titles. Instead of this "What is wrong with my code?" use titles like "how to vertically div inside..." "Why vertical-align: middle won't work in my code" and so on