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使圖像中心和內容垂直中心

回答

相關問題