Question

我有一排由四列组成。每列包含3个中心对齐的东西：文本输出，标签和图像。图像的大小不同，因此对齐关闭。我想将每列中的所有元素对齐到底部，以确保整个行的一致性。

我试过

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

并没有什么似乎有所作为。

Wonky alignment picture here

我的代码是：

<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>

另外，我被告知填充会影响bootstrap如何在不同的显示中对齐内容。有什么建议吗？

先谢谢

Answer 1

您可以使用更少的类和包装器实现相同的布局，而不会出现填充问题。当您将列嵌入列中时，它们具有以在所有情况下都被.row包围，否则您会在外边缘上遇到双重排水沟问题。并且外部所有这些必须有.container-fluid或.container来调整.row的L和R上的负边距。你没有筑巢 .container / .container-fluid

这是修订版。尝试一下。

DEMO：http://jsbin.com/huhamu/1/

请注意，在这种情况下，在.col-xs-6上使用内联块时，必须删除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*/
}

IMAGES：

如果您的视口大于视口的任何尺寸，那么请在视口上放置以下类，以使其响应并使其居中。

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

如何底部对齐div行中的所有元素？

1 个答案: