響應式圖像與底部引導文本上的文本

Question

我有麻煩與CSS對齊響應圖像下方的文本。請參閱下面的圖片。

紅外線是圖像及以下基礎設施文字的文本。

<div class="row"> 
 
    <div class="col-md-15 "> 
 

 
    <a href="https://test.sharepoint.com/sites/SitePages/Home.aspx"> <img src="https://test.sharepoint.com/sites/SiteAssets/Icons/FM&A.png" class="img-responsive" alt="Image"></a> 
 
    <p style="color: #5081D9;">Infrastructure</p> 
 

 
    </div>

我使用的引導，使圖像響應與類 「IMG響應」。我如何調整下面的文字。

請看看我的CSS

.col-xs-15, 
 
     .col-sm-15, 
 
     .col-md-15, 
 
     .col-lg-15 { 
 
      position: relative; 
 
      min-height: 1px; 
 
      padding-right: 10px; 
 
      padding-left: 10px; 
 
     } 
 

 
     .col-xs-15 { 
 
      width: 20%; 
 
      float: left; 
 
     } 
 

 
     @media (min-width: 768px) { 
 
      .col-sm-15 { 
 
       width: 20%; 
 
       float: left; 
 
      } 
 
     } 
 

 
     @media (min-width: 300px) { 
 
      .col-md-15 { 
 
       width: 20%; 
 
       float: left; 
 
      }

Answer 1

圖片網址是不是工作提供的代碼。但有一種可能的方式可以做到類似的事情。首先你需要給圖像寬度：100％;所以圖像自動獲得父容器的寬度。示例：

.col-xs-15 img, 
     .col-sm-15 img, 
     .col-md-15 img, 
     .col-lg-15 img { 
      width:100%; 
     } 

現在您可以按照使用css屬性對齊文本：text-align：center; 示例：

.col-xs-15 p, 
      .col-sm-15 p, 
      .col-md-15 p, 
      .col-lg-15 p { 
       text-align:center; 
      } 

這將根據父容器動態地對齊文本。

但有一個更好的方法。爲此部分分配一個新類。例如：

<div class="row"> 
    <div class="col-md-15 img-box"> 

    <a href="https://test.sharepoint.com/sites/SitePages/Home.aspx"> <img src="https://test.sharepoint.com/sites/SiteAssets/Icons/FM&A.png" class="img-responsive" alt="Image"></a> 
    <p style="color: #5081D9;">Infrastructure</p> 

    </div> 
</div> 

因此增加新的類，你可以使用下面的CSS後：

.img-box img{ 
     width:100%; 

} 
.img-box p { 
    text-align:center; 
}