Bootstrap 3 使图像居中和内容垂直居中答案

【问题标题】：Bootstrap 3 making images centre and content vertically centerBootstrap 3 使图像居中和内容垂直居中
【发布时间】：2014-09-06 10:53:38
【问题描述】：

我正在努力调整我的响应式图像中心。如果我不使用<img-responsive> 标签，它们会对齐中心。

图像是灰色的占位符方块，我希望它们放置在文本上方的中心，然后将文本和图像垂直对齐。

我正在使用 Bootstrap 3

这是我的代码。

<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<title>Layout3</title>
<style>
    .panel1 {
        background-color: pink;
        height:768px;
        align-items: center;
    }
    .panel2a {
        background-color:white;
        text-align: center;
        align-content: center;
        height:384px;
        margin:0 auto;
    }
    .panel2b {
        background-color:#3DB39E;
        text-align: center;
        align-content: center;
        height:384px;
        margin:0 auto;
}

.panel3 {
    background-color:#efc75e;
    height:768px;
}
.panel4 {
    background-color:#e2574c;
        height:768px;

}
.panel5 {
    background-color:#3db39e;
        height:768px;

}
.panel6 {
    background-color:#e2574c;
        height:768px;

}
.footer {
    background-color:#000000;

</style>
    </head>
    <body>
    <div class="container-full">


<div class="col-lg-12 panel1">
      <div class="col-lg-6">
        <img class="img-responsive" src="http://placehold.it/456x366" alt="" />    
    </div>
    <div class=" col-lg-6">
            <h1>Title</h1>
         <p class="lead">description</p>
            <p><input type="text" class="form-control" placeholder="e-mail"><a class="btn btn-large btn-success" href="#" target="ext">NOTIFY ME</a></p>
    </div>
</div>



<div class="row vcenter">
                <div class="col-xs-12 col-md-4 panel2a">
                    <img class="img-responsive" src="http://placehold.it/80x91" alt="" />
                    <h1>1</h1>
                    <p>abc</p>
                </div>

                <div class="col-xs-12 col-md-4 panel2a">
                    <img class="img-responsive" src="http://placehold.it/80x91" alt="" />
                    <h1>2</h1>
                    <p>def</p>
                </div>
    <!-- 2b -->

                <div class="col-xs-12 col-md-4 panel2a">
                    <img class="img-responsive" src="http://placehold.it/80x91" alt="" />
                    <h1>3</h1>
                    <p>ghi</p>
                </div>




                <div class="col-xs-12 col-md-4 panel2b">
                    <img class="img-responsive" src="http://placehold.it/80x91" alt="" />
                    <h1>4</h1>
                    <p>jkl</p>
                </div>
                <div class="col-xs-12 col-md-4 panel2b">
                    <img class="img-responsive" src="http://placehold.it/80x91" alt="" />
                    <h1>5</h1>
                    <p>mno</p>
                </div>
                <div class="col-xs-12 col-md-4 panel2b">
                    <img class="img-responsive" src="http://placehold.it/80x91" alt="" />
                    <h1>6</h1>
                    <p>pqr</p>
                </div>
</div>


>




</div> <!-- /container full -->

        </body>
    </html>

【问题讨论】：

这里是bootply，如果有人想尝试解决这个问题的话
stackoverflow.com/questions/25645881/…。首先，您需要使 col-* 高度相等，因为高度只是内容的高度，而不是父（行）的高度，以水平居中块元素（这是 img-responsive 所做的），您可以放图像上的“center-block”类或在图像响应类上写一些“margin：0 auto”（它将是全局的）

标签： image responsive-design twitter-bootstrap-3 vertical-alignment center-align

【解决方案1】：

您可以摆脱大部分内联 css，并将这个一般概念应用于您的每个图像容器：

<div class="outer" >
  <div class="inner">
    <img class="img-responsive center-block" src="//placehold.it/200x100" />
    <span class="text-center">Description</span>  
  </div>
</div>

CSS

.outer {
   display: table;
   width: 100%;
}
.inner {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

演示：http://www.bootply.com/rE4V28TBqw

【讨论】：