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

我正在努力将响应图像居中对齐。如果我不使用<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>

您可以去掉大部分内联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

相关内容

最新更新

热门标签：