html - 尝试在 Bootstrap 列中居中固定宽度规则和左对齐文本

Question

我正在尝试将 Boostrap 列中的元素居中，该列由固定宽度的图像(比列宽窄)和图像下方的一些文本与规则的左边缘左对齐(而不是与 Bootstrap 列的左边缘对齐)。

我的代码是这样的:

.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

您是否尝试过向列中的文本 div 添加一个类并向它们添加最大宽度以及向文本 div 也添加边距自动？

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>