Question

我是twitter bootstrap 3的新手。

我尝试将div水平和垂直居中。

我所做的是 -

<!-- Content -->
    <div class="container outer_container">
        <div class="inner_container">
            <h1>Jumbotron heading</h1>
            <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>
    </div>
    <!-- End Content -->

HTML代码。

CSS代码是 -

    .outer_container
    {
    position:absolute !important;
    height:100% !important;
    width:100% !important;
       display: table !important;
   }

   .inner_container
   {
       display: table-cell !important;
       vertical-align: middle !important;
       text-align:center !important;
   }

它提供了类似的输出 - Output 1

但如果我添加 col-sm-4 类，则代码为 -

HTML -

<!-- Content -->
    <div class="container outer_container">
        <div class="col-sm-4 inner_container">
            <h1>Jumbotron heading</h1>
            <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>
    </div>
    <!-- End Content -->

CSS保持不变 -

.outer_container
   {
    position:absolute !important;
       height:100% !important;
       width:100% !important;
    display: table !important;
   }

   .inner_container
   {
    display: table-cell !important;
    vertical-align: middle !important;
    text-align:center !important;
   }

但是我得到了像

这样的输出

Output 2

但我希望有一个类似的输出 - Desired Output

有人可以帮助我吗？

提前感谢您的帮助。

Answer 1

为了让它水平居中，我会这样：

<div class="container outer-container">
    <div class="row inner-container">
        <div class="col-lg-4 col-lg-offset-4">
            <!-- Contents... You can change lg for any other size or add more sizes but remember to add the corresponding offset -->
        </div>
    </div>
</div>

Answer 2

使用此 -

<!-- Content -->
    <div class="container outer_container">
        <div class="row-fluid inner_container">
            <div class="col-lg-4 col-lg-offset-4">
                <h1>Jumbotron heading</h1>
                <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
        </div>
    </div>
    <!-- End Content -->

Answer 3

归档many ways。但是，在您的情况下，.col-sm-4生成其父宽度的25％。那么为什么不让你的.inner_container 25％？

<div class="container">
   <div class="row jumbo">
       <div class="outer-container">
           <div class="inner-container">
               <h1>Jumbotron heading</h1>
               <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
           </div>
       </div>
   </div>
</div>

.jumbo {
    display: table;
}
.outer-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 500px;
}
.inner-container {
    display: inline-block;
    width: 25%;
}

请参阅demo。

**注意：您声明的!important;太多了。我认为你不需要那么多。检查您是否在主bootstrap.css之前添加了stylesheet。

使div水平和垂直居中

3 个答案: