垂直对齐Bootstrap 3中的整行

时间:2016-09-11 18:17:41

标签: html css twitter-bootstrap

我试图将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; } ,因为我认为它可能太不一致了。

3 个答案:

答案 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%;
}

topleft设置为50%会将div的左上角置于父级的中间位置。然后使用负边距我们可以将div向左移动并向上移动一点以完成正确的居中。