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中添加一个类，并为它们添加max-width以及向文本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>

尝试将固定宽度规则居中，并将对齐的文本放在Bootstrap列中

1 个答案: