Bootstrap 3-透明导航栏后面的超大屏幕和超大内容垂直居中

Question

I'm building a simple landing page using Boostrap 3. I'm having trouble getting the contents of my jumbotron to be vertically centered. 我正在使用Boostrap 3构建一个简单的着陆页。我无法使巨型飞轮的内容垂直居中。 I'm also having trouble getting the jumbotron to show through my transparent navbar; 我也很难让超大屏幕通过我的透明导航栏显示。 it's currently pinned to the bottom of the navbar. 它目前固定在导航栏的底部。 Here is my code so far: 到目前为止，这是我的代码：

HTML: HTML：

<!DOCTYPE html>

<html>
    <head>
        <!-- Normalize.CSS -->
        <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

        <!-- Custom CSS -->
        <link rel="stylesheet" href="style.css">

        <title>Hair by Dennis</title>
    </head>
    <body>
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Hair by Dennis</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right text-center">
                <li><a href="#">Services</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">My Work</a></li>
                <li><a href="#">Contact Me</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>

        <!-- Jumbotron -->
        <div class="jumbotron">
            <div class="container text-center">
                <h1>Hair by Dennis</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <!-- Triggers Modal -->
                <a href="#" class="btn btn-primary btn-lg outline sharp" data-toggle="modal" data-target="#makeAnAppointmentModal">Make an Appointment</a>
            </div>
        </div>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </body>
</html>

CSS: CSS：

.navbar, .jumbotron {
    margin-bottom: 0;
}

.navbar {
    border-radius: 0;
    background: none;
}

.navbar .nav > li > a {
    color: #F44336;
}

.navbar-default .navbar-brand {
    color: #F44336;
    padding-left: 50px;
}

.jumbotron {
    border-radius: 0;
    background-color: #F44336;
    color: #FFF;
    height: 520px;
}

/***********************
  OUTLINE BUTTONS
************************/

.btn.outline {
    background: none;
    padding: 12px 22px;
}
.btn-primary.outline {
    border: 2px solid #FFF;
    color: #FFF;
}
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
    color: #F44336;
    background-color: #FFF;
}

.btn-primary.outline:active, .btn-primary.outline.active {
    border-color: #FFF;
    color: #FFF;
    box-shadow: none;
}

/***********************
  CUSTOM BTN VALUES
************************/

.btn {
    padding: 14px 24px;
    border: 0 none;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
}

.sharp {
    border-radius: 0;
}

Please let me know if my questions are unclear. 如果我的问题不清楚，请告诉我。 Any help is appreciated! 任何帮助表示赞赏！

Answer 1

Add this to your CSS and the vertical centering should work: 将此添加到您的CSS中，垂直居中应该起作用：

.jumbotron > .container {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

Bootstrap 3-透明导航栏后面的超大屏幕和超大内容垂直居中

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-07-16 00:59:54

Bootstrap 3-透明导航栏后面的超大屏幕和超大内容垂直居中

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-07-16 00:59:54

解决方案1
1 已采纳 2015-07-16 00:59:54