如何中心垂直对齐容器在引导 [英] How to center align vertically the container in bootstrap

查看：132
本文介绍了如何中心垂直对齐容器在引导的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在寻找一种垂直居中对齐 jumbotron 中的容器 div的方法，在页面的中间。



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

  .jumbotron {
 heght：100％; 
 width：100％; 
}

.container div的宽度为 1025px ，应该在页面中间（垂直居中）。

  .container {
 width：1025px; 
} 
 
 .jumbotron .container {
 max-width：100％; 
}

我的HTML像

 < div class =jumbotron> 
< div class =container text-center> 
< h1>最简单有效的方法< / h1> 
< div class =row> 
< div class =col-md-7> 
< div class =top-bg>< / div> 
< / div> 
 
< div class =col-md-5 iPhone-featuresstyle =margin-left：-25px;> 
< ul class =top-features> 
< li> 
< span>< i class =fa fa-random simple_bg top-features-bg>< / i>< / span> 
< p>< strong>重定向< / strong>< br>访问者转化更多内容的地方。< / p& 
< / li> 
< li> 
< span>< i class =fa fa-cogs simple_bg top-features-bg>< / i>< / span> 
< p>< strong>跟踪< / strong>< br>视图，点击次数和转化次数。 
< / li> 
< li> 
< span>< i class =fa fa-check simple_bg top-features-bg>< / i>< / span> 
< p>< strong>检查< / strong>< br>始终显示您的链接的状态< / p& 
< / li> 
< li> 
< span>< i class =fa fa-users simple_bg top-features-bg>< / i>< / span> 
< p>< strong>与客户，合作伙伴和同事合作< / strong>< br& 
< / li> 
< a href =pricing-and-signup.htmlclass =btn-primary btn h2 lightBlue get-Started-btn> GET STARTED< / a> 
< h6 class =get-Started-sub-btn>免费版可用！< / h6> 
< / ul> 
< / div> 
< / div> 
< / div> 
< / div>

所以我想让这个页面让jumbotron适应屏幕的高度和宽度，容器垂直中心到jumbotron。如何实现？

解决方案

灵活方式



通过使用弹性框布局，垂直对齐现在非常简单。如今，广泛范围的网络浏览器中支持此方法，但Internet Explorer 8& 9.因此，我们需要使用一些hack / polyfills 或不同方法。



下面，我将向您展示如何在 3行文本（不管旧的flexbox语法）。



注意：最好使用额外的类，而不是改变 .jumbotron 来实现垂直对齐。我将使用 vertical-center 类名作为实例。



范例 （A Mirror 。

。

 < div class = jumbotron vertical-center> <！ -  
 ^ ---添加类 - > 
< div class =container> 
 ... 
< / div> 
< / div> 
  



  .vertical-center { 
最小高度：100％; / *浏览器的后备不支持vh单位* / 
 min-height：100vh; / *这两行记为一行:-) * / 
 
 display：flex; 
 align-items：center; 
}

重要注释演示）：

code>


  1. 或 min-height 属性相对于父元素的 height 应该明确指定父项的 height 。



  3. 在一些旧的网络浏览器如Firefox 9 （其中我测试过），flex容器 - .vertical-center 在这种情况下不会占用父容器内的可用空间，因此我们需要指定 width 属性： width：100％。


  4. 在上面提到的一些网络浏览器中，flex项目 - .container 在这种情况下可能不会水平地出现在中心。似乎应用的左/右 margin 的 auto 对flex项目没有任何影响。
    因此，我们需要使 box-pack / justify-content 对齐。


有关列的更多详细信息和/或垂直对齐，请参阅以下主题：







传统浏览器的传统方式



在我回答这个问题的时候我写的老答案。此方法已在 这里 ，它应该在Internet Explorer 8和9中工作。我将简要解释：



在内联流中，内联级元素可以通过vertical-align：middle 声明。来自 W3C 的规格：


中

将框的垂直中点与父框的基线对齐，加上父框的半高。 / p>

在这种情况下，父 - .vertical-center 有一个明确的 height ，如果我们可以有一个子元素具有完全相同的 height 我们可以将父项的基线移动到全高度子项的中点，并令人惊讶地使我们想要的流式子项 - .container - 对齐



尽管如此，我们可以创建一个全高度元素 .vertical-center by :: before 或 :: after 伪元素，并且改变它的默认显示类型，另一个孩子， .container code> inline-block 。



然后使用 vertical-align：middle; 

 <$ c $> 
 c>< div class =jumbotron vertical-center> 
< div class =container> 
 ... 
< / div> 
< / div> 
  



  .vertical-center { 
 height：100％; 
 width：100％; 
 
 text-align：center; / *水平对齐内联（-block）元素* / 
 font：0/0 a; / *删除inline（-block）元素之间的差距* / 
} 
 
 .vertical-center：before {/ * create a full-height inline block pseudo = element * / 
 content：; 
 display：inline-block; 
 vertical-align：middle; / *垂直对齐的内联元素* / 
 height：100％; 
} 
 
 .vertical-center> .container {
 max-width：100％; 
 
 display：inline-block; 
 vertical-align：middle; / *垂直对齐的内联元素* / 
 / *重置字体属性* / 
 font：16px / 1Helvetica Neue，Helvetica，Arial，sans-serif; 
}

工作演示

。此外，为了防止超小屏幕出现意外问题，您可以重置伪元素 auto 或 0 或更改其显示 type none 如果需要的话：

  @media（max-width：768px）{
 .vertical-center：before {
 height：auto; 
 / *或* / 
 display：none; 
} 
}

更新的演示



还有一件事：



如果容器周围有 footer / 标题部分，正确地 （相对，绝对 c $ c> z-index 值（用于保证），以使它们始终在其他人的顶部。


I'm looking for a way to vertically center align the container div inside the jumbotron and to set it in the middle of the page.

The .jumbotron has to be adapted to the full height and width of the screen so I used this CSS.

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

The .container div has a width of 1025px and should be in the middle of the page (vertically center).

.container{
  width:1025px;
}

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

My HTML is like 

<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>
                        <li>
                            <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
                            <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
                        </li>
                            <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
                            <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
                    </ul>
                </div>
            </div>
        </div>
    </div>

So I want this page to have the jumbotron adapted to the height and width of the screen along with the container vertically center to the jumbotron. How can I achieve it?

解决方案

The Flexible box way

Vertical alignment is now very simple by the use of Flexible box layout. Nowadays, this method is supported in a wide range of web browsers except Internet Explorer 8 & 9. Therefore we'd need to use some hacks/polyfills or different approaches for IE8/9.

In the following I'll show you how to do that in only 3 lines of text (regardless of old flexbox syntax).

Note: it's better to use an additional class instead of altering .jumbotron to achieve the vertical alignment. I'd use vertical-center class name for instance.

Example Here (A Mirror on jsbin).

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>


.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

Important notes (Considered in the demo):

  1. A percentage values of height or min-height properties is relative to the height of the parent element, therefore you should specify the height of the parent explicitly.

  2. Vendor prefixed / old flexbox syntax omitted in the posted snippet due to brevity, but exist in the online example.

  3. In some of old web browsers such as Firefox 9 (in which I've tested), the flex container - .vertical-center in this case - won't take the available space inside the parent, therefore we need to specify the width property like: width: 100%.

  4. Also in some of web browsers as mentioned above, the flex item - .container in this case - may not appear at the center horizontally. It seems the applied left/right margin of auto doesn't have any effect on the flex item.
    Therefore we need to align it by box-pack / justify-content.

For further details and/or vertical alignment of columns, you could refer to the topic below:

The traditional way for legacy web browsers

This is the old answer I wrote at the time I answered this question. This method has been discussed here and it's supposed to work in Internet Explorer 8 and 9 as well. I'll explain it in short:

In inline flow, an inline level element can be aligned vertically to the middle by vertical-align: middle declaration. Spec from W3C:

middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

In cases that the parent - .vertical-center element in this case - has an explicit height, by any chance if we could have a child element having the exact same height of the parent, we would be able to move the baseline of the parent to the midpoint of the full-height child and surprisingly make our desired in-flow child - the .container - aligned to the center vertically.

Getting all together

That being said, we could create a full-height element within the .vertical-center by ::before or ::after pseudo elements and also change the default display type of it and the other child, the .container to inline-block.

Then use vertical-align: middle; to align the inline elements vertically.

Here you go:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>


.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

WORKING DEMO.

Also, to prevent unexpected issues in extra small screens, you can reset the height of the pseudo-element to auto or 0 or change its display type to none if needed so:

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

UPDATED DEMO

And one more thing:

If there are footer/header sections around the container, it's better to position that elements properly (relative, absolute? up to you.) and add a higher z-index value (for assurance) to keep them always on the top of the others.

这篇关于如何中心垂直对齐容器在引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆