如何在引导中垂直对齐容器

Question

如何在引导中垂直对齐容器

我正在寻找一种垂直中心对齐的方法container内部的divjumbotron并将其设置在页面的中间。

这个.jumbotron必须适应整个屏幕的高度和宽度，所以我使用了这个CSS。

.jumbotron{
  heght:100%;
  width:100%;}

这个.containerdiv的宽度为1025px并且应该在页面的中间(垂直中心)。

.container{
  width:1025px;}.jumbotron .container {
  max-width: 100%;}

我的HTML就像

<div class="jumbotron">
        <div class="container text-center">
            <h1>The easiest and powerful way</h1>
            <div class="row">
                <div class="col-md-7">
                     <div class="top-bg"></div>
                </div>

                <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                    <ul class="top-features">
                        <li>
                            <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
                            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
                        </li>
                        <li>
                            <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
                            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
                        </li>
                        <li>
                            <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
                            <p><strong>Check</strong><br>Constantly the status of your links.</p>
                        </li>
                
                    </ul>
                </div>
            </div>
        </div>
    </div>

因此，我希望这个页面能够适应屏幕的高度和宽度，以及容器垂直中心到巨无霸。我怎样才能做到呢？

Answer 1

柔性箱方式垂直对准现在非常简单，通过使用柔性盒布局..现在，这个方法在宽范围除了InternetExplorer 8和9。因此，我们需要使用一些hack/聚填充物或不同方法第IE8/9号文件。在下面的文章中，我将向您展示如何仅在3行文本(不考虑旧的Flexbox语法).注：最好使用一个额外的类，而不是修改.jumbotron实现垂直对齐。我会用vertical-center例如类名。这里的例子&nbsp;(A)镜(关于jsbin).<div&nbsp;class="jumbotron&nbsp;vertical-center">&nbsp;<!--&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;^---&nbsp;Added&nbsp;class&nbsp;&nbsp;--> &nbsp;&nbsp;<div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;</div></div>.vertical-center&nbsp;{ &nbsp;&nbsp;min-height:&nbsp;100%;&nbsp;&nbsp;/*&nbsp;Fallback&nbsp;for&nbsp;browsers&nbsp;do&nbsp;NOT&nbsp;support&nbsp;vh&nbsp;unit&nbsp;*/ &nbsp;&nbsp;min-height:&nbsp;100vh;&nbsp;/*&nbsp;These&nbsp;two&nbsp;lines&nbsp;are&nbsp;counted&nbsp;as&nbsp;one&nbsp;:-)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;align-items:&nbsp;center;}重要注记(在演示中考虑):A&nbsp;百分比值.的值height或min-height属性相对于height因此，应该指定height显式的父母。供应商前缀/旧的Flexbox语法由于简洁而在已发布的代码段中省略，但在线示例中存在。在一些旧的web浏览器中，比如Firefox 9(其中我测试过)挠性容器-.vertical-center在这种情况下-将不会占用父级内部可用的空间，因此我们需要指定width财产，如：width: 100%.另外，在上面提到的一些web浏览器中，FLEX项目-.container在这种情况下-可能不会出现在中心水平。似乎申请的左/右margin的auto对弹性物品没有任何影响。因此，我们需要通过box-pack / justify-content.有关列的更多详细信息和/或垂直对齐，请参考以下主题：垂直对齐与引导带3旧式web浏览器的传统方式这是我在回答这个问题时写的旧答案。讨论了这种方法。这里它应该也适用于InternetExplorer 8和9。我会简单地解释一下：在内联流中，内联级别元素可以通过以下方式垂直对齐到中间。vertical-align: middle申报。规格W3C:中间将方框的垂直中点与父框的基线加上父框x高度的一半对齐。如果父母-.vertical-center元素在本例中有一个显式height，如果我们有一个完全相同的子元素height对于父母，我们可以若要移动父级的基线，请执行以下操作到全高度孩子的中点，并令人惊讶地使我们想要的流子-.container-垂直对中。聚在一起尽管如此，我们可以在.vertical-center通过::before或::after元素，并更改默认值。display类型和另一个孩子，.container到inline-block.然后使用vertical-align: middle;若要垂直对齐内联元素，请执行以下操作。给你：<div&nbsp;class="jumbotron&nbsp;vertical-center"> &nbsp;&nbsp;<div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;&nbsp;</div></div>.vertical-center&nbsp;{ &nbsp;&nbsp;height:100%; &nbsp;&nbsp;width:100%; &nbsp;&nbsp;text-align:&nbsp;center;&nbsp;&nbsp;/*&nbsp;align&nbsp;the&nbsp;inline(-block)&nbsp;elements&nbsp;horizontally&nbsp;*/ &nbsp;&nbsp;font:&nbsp;0/0&nbsp;a;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;remove&nbsp;the&nbsp;gap&nbsp;between&nbsp;inline(-block)&nbsp;elements&nbsp;*/}.vertical-center:before&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;/*&nbsp;create&nbsp;a&nbsp;full-height&nbsp;inline&nbsp;block&nbsp;pseudo=element&nbsp;*/ &nbsp;&nbsp;content:&nbsp;"&nbsp;"; &nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;vertical-align:&nbsp;middle;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;vertical&nbsp;alignment&nbsp;of&nbsp;the&nbsp;inline&nbsp;element&nbsp;*/ &nbsp;&nbsp;height:&nbsp;100%;}.vertical-center&nbsp;>&nbsp;.container&nbsp;{ &nbsp;&nbsp;max-width:&nbsp;100%; &nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;vertical-align:&nbsp;middle;&nbsp;&nbsp;/*&nbsp;vertical&nbsp;alignment&nbsp;of&nbsp;the&nbsp;inline&nbsp;element&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;reset&nbsp;the&nbsp;font&nbsp;property&nbsp;*/ &nbsp;&nbsp;font:&nbsp;16px/1&nbsp;"Helvetica&nbsp;Neue",&nbsp;Helvetica,&nbsp;Arial,&nbsp;sans-serif;}工作演示.此外，为了防止超小型屏幕中出现意外问题，可以将伪元素的高度重置为auto或0或改变其display输入到none如有必要，请：@media&nbsp;(max-width:&nbsp;768px)&nbsp;{ &nbsp;&nbsp;.vertical-center:before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;Or&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; &nbsp;&nbsp;}}更新演示还有一件事：如果有footer/header容器周围的部分，最好正确地定位元素(relative,&nbsp;absolute？由你决定)增加一个更高的z-index有价值(为保证)使他们永远处于其他人的顶端。

Answer 2

添加Bootstrap.css，然后将其添加到CSS中&nbsp; &nbsp;html, body{height:100%; margin:0;padding:0}&nbsp;.container-fluid{&nbsp; height:100%;&nbsp; display:table;&nbsp; width: 100%;&nbsp; padding: 0;}&nbsp;.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}&nbsp;&nbsp;.centering {&nbsp; float:none;&nbsp; margin:0 auto;}Now call in your page&nbsp;<div class="container-fluid">&nbsp; &nbsp; <div class="row-fluid">&nbsp; &nbsp; &nbsp; &nbsp; <div class="centering text-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Am in the Center Now :-)&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>