在父元素内垂直对齐 div

Question

我一直很难在父元素中垂直对齐 div。我已经尝试了 vertical-align: center;、display: inline-block; 以及我能找到的关于垂直对齐的任何其他方法，但实际上对我来说没有任何效果。如果有任何影响，我正在使用 bootstrap。

我想在 div #banner 中垂直对齐 div .bannerContent。我希望这是一个简单的修复，我只是遗漏了一些简单的东西。

当我尝试使用 display: table-cell; 它打破了水平居中。

我已经包含了整个文件以防万一有什么东西从其他地方破坏了它。非常感谢！

这是我的 HTML:

<!doctype html>
<html>
<head>
    <title>My title here</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
    <div id="banner">
        <div class="bannerAlign">
            <nav class="navbar navbar-default navbar-static-top">
                <ul class="nav navbar-nav right">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Another Link</a></li>
                  </ul>
            </nav>
        </div>
        <div class="container bannerContent"> <!-- I want this div vertically aligned -->
            <img id="profile" src="images/profile.jpg" />
            <header>
                <h1>My name here</h1>
                <h4>More words here</h4>
            </header>
        </div>
        <span class="glyphicon glyphicon-menu-down down-arrow"></span>
    </div>
    <div class="container">
        <div class="content">
            <div class="well">
                <h1>Some content here</h1>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

还有我的 CSS:

body {
  background: url(../images/yosemite.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: Oswald;
}

.navbar {
  background: none;
  border: none;
  color: white;
}

.right {
  float: right;
}

.navbar a {
  color: #fff !important;
  text-transform: uppercase;
}

#banner {
    background: rgba(0, 0, 0, .6);
  color: white;
  height: 100vh;
  margin-bottom: 50px;
  letter-spacing: 1.3px;
}

.bannerAlign {
  margin-right: 5%;
}

.bannerContent {
  text-align: center;
  vertical-align: middle; /* Doesn't do anything */
}

.bannerContent header {
  display: inline-block;
  margin-left: 3em;
}

.bannerContent header > h1 {
  margin-bottom: 13px;
}

#profile {
  width: 16vw;
  border-radius: 100%;
}

.down-arrow {
  position: absolute;
  bottom: 0;
  top: 95%;
  display: block;
  left: 50%;
  font-size: 2.5em;
}

/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v11/Qw6_9HvXRQGg5mMbFR3Phn-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v11/_P8jt3Y65hJ9c4AzRE0V1OvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

Answer 1

只需使用以下 css:

#banner {
    display: flex;
    align-items: center;
}

Answer 2

你可以使用这个：css-tricks。最简单的方法是像超级用户写的那样使用 flexbox。

Answer 3

body {
  background: url(../images/yosemite.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: Oswald;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.navbar {
  background: none;
  border: none;
  color: white;
}

.right {
  float: right;
}

.navbar a {
  color: #fff !important;
  text-transform: uppercase;
}

#banner {
  background: rgba(0, 0, 0, .6);
  color: white;
  height: 100vh;
  margin-bottom: 50px;
  letter-spacing: 1.3px;
  display:flex;
  max-width:100%;
  flex-direction:column;
}

.bannerAlign {
  margin-right: 5%;
}

.bannerContent {
  text-align: center;
  flex-grow:1;
  /*vertical-align: middle;*/
  display:flex;
  align-items:center;
  justify-content:center;
}

.bannerContent header {
  display: inline-block;
  margin-left: 3em;
}

.bannerContent header > h1 {
  margin-bottom: 13px;
}

#profile {
  width: 16vw;
  border-radius: 100%;
}

.down-arrow {
  position: absolute;
  bottom: 0;
  top: 95%;
  display: block;
  left: 50%;
  font-size: 2.5em;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v11/Qw6_9HvXRQGg5mMbFR3Phn-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v11/_P8jt3Y65hJ9c4AzRE0V1OvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="banner">
        <div class="bannerAlign">
            <nav class="navbar navbar-default navbar-static-top">
                <ul class="nav navbar-nav right">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Another Link</a></li>
                  </ul>
            </nav>
        </div>
        <div class="container bannerContent"> <!-- I want this div vertically aligned -->
            <img id="profile" src="images/profile.jpg" />
            <header>
                <h1>My name here</h1>
                <h4>More words here</h4>
            </header>
        </div>
        <span class="glyphicon glyphicon-menu-down down-arrow"></span>
    </div>
    <div class="container">
        <div class="content">
            <div class="well">
                <h1>Some content here</h1>
            </div>
        </div>
    </div>

在父元素内垂直对齐 div

Vertically aligning div within parent element

html

css

vertical-alignment