Question

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

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

我正在使用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>

Answer 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;
}

DEMO：http://www.bootply.com/rE4V28TBqw

Bootstrap 3使图像居中，内容垂直居中

1 个答案: