0
У меня очень тяжелое время вертикально выравнивание div внутри родительского элемента. Я пробовал vertical-align: center;, display: inline-block; и все остальное, что я мог найти по вертикали, но ничего на самом деле не работало для меня. Я использую bootstrap, если это влияет на что угодно.Вертикальное выравнивание div внутри родительского элемента
Я хочу вертикально выровнять div .bannerContent в div #banner. Я надеюсь, что это простое исправление, и я просто пропустил что-то простое.
Когда я попытался использовать 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;
}
вы можете предоставить рабочую скрипку или codepen. используйте этот http://codepen.io/shivk/pen/wgGeOJ/ –