我试图将Bootstrap 3行垂直居中。除了您在此处看到的HTML之外,我在网站上没有其他内容。到目前为止,它还没有真正发挥作用。
我还尝试了一些我在互联网上找到的代码,但它们似乎都没有用。正如您所看到的,我尝试将容器后面的所有内容包装在一个单独的INSERT INTO orderitem (order_no, itemid, qty, price)
VALUES (1234, 42, 3, 19.95)
ON DUPLICATE KEY UPDATE qty = qty + VALUES(qty), price = VALUES(price);
中,以便该行在其中居中。遗憾的是,它没有用。
div
CSS:
<?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") ?>
为了清理,我希望行本身居中,以便我不必使用.vertical {
display: inline-block;
vertical-align: middle;
float: none;
}
,因为我认为它可能太不一致了。
答案 0 :(得分:1)
以下CSS似乎给出了预期的结果:
.row {
display: flex;
align-items: center;
min-height: 100vh;
}
查看我为此问题所做的小提琴:https://jsfiddle.net/2678jhbh/2/
答案 1 :(得分:0)
.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;
}
答案 2 :(得分:0)
要将div与班级row
居中,请移除.vertical
css并尝试:
.row {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
将top
和left
设置为50%会将div的左上角置于父级的中间位置。然后使用负边距我们可以将div向左移动并向上移动一点以完成正确的居中。