嘗試將一個固定寬度的規則和左對齊的文本居中置於引導列中

Question

我試圖將一個項目放在Boostrap列中，該列由一個固定寬度的圖像（即窄於列寬）和一些文本組成圖像與規則的左邊緣左對齊（並且不與引導列的左邊緣左對齊）。

我的代碼如下所示：

.imgWidth { 
 
    max-width:150px; 
 
}

 <div class="row text-center"> 
 
      <div class="col-xs-12 col-sm-12 col-md-2 text-center">  
 
      </div> 
 
      <div class="col-xs-12 col-sm-6 col-md-2"> 
 
       <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
 
        <div class="text-left">text under image</div> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-6 col-md-2"> 
 
       <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
 
        <div class="text-left">text under image</div> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-6 col-md-2"> 
 
       <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
 
        <div class="text-left">text under image</div> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-6 col-md-2"> 
 
       <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
 
        <div class="text-left">text under image</div> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-12 col-md-2 text-center">   
 
      </div> 
 
     </div>

此代碼中心圖像中的列，但文本，而不是留在圖像下對齊，是留給同列對齊。

有沒有辦法讓文字左對齊上面的圖片？我嘗試了所有可能的代碼組合，但我沒有成功。

Answer 1

你有沒有嘗試添加一個類到列中的文本divs並向它們添加最大寬度以及爲文本div添加margin auto？

CSS：

.imgWidth, .someClass { 
    max-width:150px; 
    margin: auto; 
} 

HTML：

<div class="row text-center"> 
     <div class="col-xs-12 col-md-2 text-center">  
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-2"> 
      <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
       <div class="text-left someClass">text under image</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-2"> 
      <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
       <div class="text-left someClass">text under image</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-2"> 
      <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
       <div class="text-left someClass">text under image</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-2"> 
      <div class="text-center"><img class="imgWidth" src="/assets/img/photo.jpg"></div> 
       <div class="text-left someClass">text under image</div> 
     </div> 
     <div class="col-xs-12 col-md-2 text-center">   
     </div> 
    </div>