如何底部对齐 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-fluid 或一个 .container 来调整 .row 的 L 和 R 的负边距。你不嵌套 .container/.container-fluid

这是修改后的版本。试试看。

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

请注意，在这种情况下，当您在 .col-xs-6 上使用 inline-block 时，您必须删除由 display:inline/inline-block 样式创建的空格。这可以通过将您的 html 与 cmets 原样格式化如下来完成（或者您可以将父级的字体大小归零并将其应用于子级）：

<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="" />