html - 垂直对齐我的元素？CSS+BOOTSTRAP

Question

我有这个网站:

http://avocat2.dac-proiect.ro/?page_id=17

这是 HTML 代码:

 <div class="container-fluid">
<p class="text-center" style="color:white">Hello World!</p>
<p class="text-center" style="color:white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa</p>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4" style="">
<p><img src="wp-content/themes/WordPressBootstrap-master/images/b1.jpg" class="img-responsive center-block" alt="Cinque Terre">
    </p></div>
<div class="col-sm-4 col-md-4 col-lg-4" style="">
     <img src="wp-content/themes/WordPressBootstrap-master/images/b2.jpg" class="img-responsive center-block" alt="Cinque Terre">
    </div>
<div class="col-sm-4 col-md-4 col-lg-4" style="">
    <img src="wp-content/themes/WordPressBootstrap-master/images/b3.jpg" class="img-responsive center-block" alt="Cinque Terre">
    </div>
<p></p></div>
</div>

对于所有分辨率，我希望此元素在中心垂直对齐。

目前分辨率看起来像:

http://i61.tinypic.com/2wh4e4g.jpg

这是 CSS 代码:

.entry-content2
{
  background:url("http://avocat2.dac-proiect.ro/wp-content/themes/WordPressBootstrap-master/images/BODY-DROP.png");
width:100%;

  height: 100vh;
}

我该如何解决这个问题？ 我尝试了几种选择，但不幸的是在几种分辨率下看起来不一样。

提前致谢!

Answer 1

让我们为此使用 flexbox !

.container-fluid{
  height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

这里我使用视口(viewport)垂直单位使容器成为框架大小。 然后，我将显示器设置为 flex 的，并进行一些 flex 的居中设置。

但是，不要忘记在 .container-fluid 中添加一个 div，如下所示:

<div class="container-fluid">
<div class="hola">
...(rest of content)
</div>
</div>

你可以随意命名它并根据你想要的 div 设置样式，因为你可以避免由于 flex box 只影响父 div 而导致居中困惑。