Bootstrap 3使图像中心和内容垂直中心

我努力尝试调整我的响应式图像中心。如果我不使用<img-responsive>标签，它们会对齐中心。Bootstrap 3使图像中心和内容垂直中心

图像是灰色的占位符正方形，我希望它们位于文本上方的中心，然后将文本与图像垂直对齐。

我正在使用引导程序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>

来源

2014-09-05 Steve Davies

这里是一个[** bootply **]（http://www.bootply.com/Hf6lUH2WfN）如果有人想要解决这个问题，我会提出 – 2014-09-05 20:30:35

http://stackoverflow.com/questions/25645881/bootstrap-3-2-vertical-align-image-next-to-text-without-knowing-height/25651881#25651881。首先，由于高度只是内容的高度，而不是父级（行）的高度，所以需要将col- *的高度设置为相等的高度，以便将水平居中的块元素（这是img响应的）图像上的类“中心块”或在图像响应类上写入一些“边距：0自动”（它将是全局的） – Christina 2014-09-05 20:50:47

可以摆脱大部分的内联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

来源

2014-09-06 02:53:38

Bootstrap 3使图像中心和内容垂直中心

回答

相关问题