在bootstrap栅格系统中,如何将图片垂直居中

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在bootstrap栅格系统中,如何将图片垂直居中相关的知识,希望对你有一定的参考价值。

<div class="panel panel-primary col-md-6">
<div class="panel-heading">最新活动</div>
<div class="panel-body">
<div class="row" >
<div class="col-md-6" style="">
<img class="img-thumbnail" src= "img/1.jpg" alt="Alternate Text" /> <!--将这张图片垂直居中-->
</div>
<div class="col-md-6">
<ul>
<li><h1>asdfasdfadf</h1></li>
<li>asdfasdfadf</li>
<li>asdfasdfadf</li>
<li>asdfasdfadf</li>
<li>asdfasdfadf</li>
<li>asdfasdfadf</li>
<li>asdfasdfadf</li>
<li>asdfasdfadf</li>
</ul>
</div>
</div>
</div>
</div>

参考技术A 垂直居中只能使用这个代码
.center-vertical
position:relative;
top:50%;
transform:translateY(-50%);

如何在 Bootstrap 列中垂直居中 div? [复制]

【中文标题】如何在 Bootstrap 列中垂直居中 div? [复制]【英文标题】:How to vertically center a div in a Bootstrap column? [duplicate] 【发布时间】:2014-07-15 17:32:49 【问题描述】:

我正在尝试在 Bootstrap 列中垂直(和水平)居中 div(高度和宽度未知)。我可以通过将文本对齐设置为中心来水平居中 div。但是我正在努力使 div 垂直居中。这是我的代码的 sn-p:

<div class="row">
    <div class="col-md-8 col-md-offset-2 col-xs-12">
        <div style="text-align: center"> <!--this works-->
            <p>Content goes here</p>                
        </div>
    </div>
</div>

提前致谢!

【问题讨论】:

也看看Vertical align with bootstrap 3 【参考方案1】:

如果你使用 Twitter Bootstrap 并且你有 Bootstrap 3,他们添加了&lt;div class="center-block"&gt;...&lt;/div&gt;

参考:Bootstrap v3.1.1。

【讨论】:

您好,谢谢您的回复。但是我尝试使用 center-block 类但它不起作用这是我的代码:&lt;div class="row"&gt; &lt;div class="col-md-8 col-md-offset-2 col-xs-12"&gt; &lt;div class="center-block" style="text-align: center; vertical-align: middle;"&gt; &lt;!--this works--&gt; &lt;p &gt;Content goes here&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; 这是水平居中,仍然 “center-block”类用于水平居中,而不是垂直居中。【参考方案2】:

你可能想试一试:

<div class="row">
   <div class="col-md-8 col-md-offset-2 col-xs-12 Outer">
      <div class="Inner>
         <p >Content goes here</p>                
      </div>
   </div>
</div>


/* CSS Code */

.Outer 
   border: 1px solid black;  /* Just so you can see it centered vertically */
   display: table-cell;
   height: 100%;
   min-height: 15em;    /* Set to height you need */

.Inner > p 
   vertical-align: middle;
   text-align: center;
   margin: 0 auto;

请记住,浏览器会自动识别分辨率宽度; 但是,相同的功能不适用于高度。您需要设置一个指定的 外部元素上的高度,以便内部内容有一些东西 垂直对齐。希望这可以帮助!

【讨论】:

嘿,非常感谢。但是它不起作用。段落水平居中,但仍保持在垂直顶部。

以上是关于在bootstrap栅格系统中,如何将图片垂直居中的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap栅格系统中如何实现垂直居中

bootstrap布局中的 图片如何垂直居中

Bootstrap:如何将按钮组居中对齐(垂直)

如何在 Bootstrap 列中垂直居中 div? [复制]

Bootstrap响应式栅格系统设计

bootstrap 的栅格怎么让里面的文字居中显示...