在Bootstrap 3中垂直对齐整行
在Bootstrap 3中垂直对齐整行
提问于 2016-09-12 02:17:41
我尝试垂直居中Bootstrap 3行。除了你在这里看到的HTML之外，我在网站上没有其他内容。到目前为止，它还没有真正起作用。
我还尝试了一些我在互联网上找到的代码，但它们似乎都不起作用。正如您所看到的，我尝试将容器之后的所有内容包装在一个单独的div中，以便行在其中居中。遗憾的是，它不能工作。
<?php include_once ("header.php") ?>
<div id="bg"></div>
<div class="container">
<!-- Navigation area -->
<?php include_once ("navigation.php");?>
</div>
<div class="container">
<div class="vertical">
<div id="fade" class="about-wrapper animated fadeInLeft">
<div class="row">
<div class="col-xs-6 nova">
<img class="img-responsive" src="../covers/nova-about.png" alt="" />
</div>
<div class="col-xs-6 opa">
<div class="title">
<h3>Leo</h3>
</div>
<div class="title">
<h3>Age 7</h3>
</div>
<div class="title">
<h3>Character</h3>
</div>
<div class="describ">
<p>
Leo is calm, playful and a tiny guard dog. He is very social and loves to play with other dogs.
<br> He gets a little greedy when you caress him but he can also like it to relax alone on the couch. Overall a Dream dog to have and we are lucky he is ours.
</p>
</div>
<div class="title">
<h3>Introduction to the Family</h3>
</div>
<div class="describ">
<p>
Leo was our first dog we had. We nearly took a different one but as she was reserved, he "puppy-eyed" his way into Roannes heart.
<br> His young appearence made him even more sympathetic and he enjoyed it instantly with his new Family.
<br>
<br><strong>Fun fact:</strong> I randomly met the real owner in the bus and he told me leo was only sent to SPA because he cant be alone in the house and was making too much noise. Well, lucky us!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include_once ("footer.php") ?>CSS：
.vertical {
display: inline-block;
vertical-align: middle;
float: none;
}为了把事情弄清楚，我希望行本身居中，这样我就不必使用top: 25vh，因为我认为它可能太不一致了。
Stack Overflow用户
发布于 2016-09-12 02:57:10
.vertical {
min-height: 100vh;
display: flex;
align-items: center;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="vertical">
<div id="fade" class="about-wrapper animated fadeInLeft">
<div class="row">
<div class="col-xs-6 nova">
<img class="img-responsive" src="../covers/nova-about.png" alt="" />
</div>
<div class="col-xs-6 opa">
<div class="title">
<h3>Leo</h3>
</div>
<div class="title">
<h3>Age 7</h3>
</div>
<div class="title">
<h3>Character</h3>
</div>
<div class="describ">
<p>
Leo is calm, playful and a tiny guard dog. He is very social and loves to play with other dogs.
<br> He gets a little greedy when you caress him but he can also like it to relax alone on the couch. Overall a Dream dog to have and we are lucky he is ours.
</p>
</div>
<div class="title">
<h3>Introduction to the Family</h3>
</div>
<div class="describ">
<p>
Leo was our first dog we had. We nearly took a different one but as she was reserved, he "puppy-eyed" his way into Roannes heart.
<br> His young appearence made him even more sympathetic and he enjoyed it instantly with his new Family.
<br>
<br><strong>Fun fact:</strong> I randomly met the real owner in the bus and he told me leo was only sent to SPA because he cant be alone in the house and was making too much noise. Well, lucky us!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
.vertical {
min-height: 100vh; // optionally use calc to offset navigation
display: flex;
align-items: center;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39439225
复制相关文章
相似问题
腾讯云开发者
