如何使div行中的所有元素底部對齊？

Question

我有一排由四列組成。 每列包含3個居中對齊的內容：文本輸出，標簽和圖像。 圖像的大小不同，因此對齊不正確。 我想將每列中的所有元素都對齊到底部，以確保行的一致性。

我試過了

style="text-align:bottom;" bottom:0, vertical-align:bottom;"

似乎沒有什么改變。

我的代碼是：

<div class="row">
    <div class="col-xs-12">
        <div class="col-xs-6 col-md-2">
            <div align="center"><img src="@Url.Content("random.png")" /></div>
            <div id="Text1" class="text-center">1</div>
            <div class="text-center">Label1</div>
        </div>
        <div class="col-xs-6 col-md-2 col-md-offset-1">
            <div align="center"><img  src="@Url.Content("random2.png")" /></div>
            <div id="text2" class="text-center">2</div>
            <div class="text-center">Label2</div>
        </div>
        <div class="col-xs-6 col-md-2 col-md-offset-1">
            <div align="center"><img  src="@Url.Content("random3.png")" /></div>
            <div id="text3" class="text-center">3</div>
            <div class="text-center">Label3</div>
        </div>
        <div class="col-xs-6 col-md-2 col-md-offset-1">
            <div align="center"><img  src="@Url.Content("random.png")" /></div>
            <div id="text2" class="text-center">3.4</div>
            <div class="text-center">Label</div>
        </div>
    </div>
</div>

另外，我被告知填充會影響引導程序如何在不同的顯示器中對齊內容。 有什么建議么？

提前致謝

Answer 1

您可以使用更少的類和包裝器來實現相同的布局，並且不會出現填充問題。 當您將列嵌套在列中時，在所有情況下都必須用.row包圍，否則在外邊緣會出現雙槽問題。 和所有的外部必須有一個.container-流體或.container調整在.row的L和R的負幅度。 您不嵌套.container / .container-fluid

這是修訂版。 試試看。

演示： http : //jsbin.com/huhamu/1/

請注意，在這種情況下，當在.col-xs-6上使用inline-block時，必須刪除display：inline / inline-block樣式創建的空格。 這可以通過按如下所示格式化HTML並帶有注釋來實現（或者您可以將父字體的字體大小歸零，然后將其應用於子字體）：

<div class="container">
   <div class="row inline-block-row text-center">
      <div class="col-xs-6 col-md-3">
         <img src="@Url.Content("random.png")" />
         <div id="Text1">1</div>
         Label1
      </div><!--comment
--><div class="col-xs-6 col-md-3">
         <img  src="@Url.Content("random2.png")" />
         <div id="text2" class="text-center">2</div>
         Label2 this is a test
      </div><!--comment
--><div class="col-xs-6 col-md-3">
         <img  src="@Url.Content("random3.png")" />
         <div id="text3" class="text-center">3</div>
         Label3
      </div><!--comment
--><div class="col-xs-6 col-md-3">
         <img  src="@Url.Content("random.png")" />
         <div id="text2">3.4</div>
         Label
      </div>
   </div>
</div>  

CSS：

.inline-block-row .col-xs-6 {
  border:1px solid red;
  float:none;
  display:inline-block; /* the default is baseline, so no need to add vertical alignment in your case*/
}

圖片：

如果在任何視口大小下具有比視口更大的圖像，請在其上放置以下類，以使它們響應並居中。

<img src="myimage.png" class="img-responsive center-block" alt="" />