Twitter bootstrap 3 - 在一行中垂直对齐列[中]

Posted 2023-03-05

【中文标题】Twitter bootstrap 3 - 在一行中垂直对齐列[中]

【英文标题】：Twitter bootstrap 3 - vertical align columns in a row [middle]

【发布时间】：2015-03-20 13:45:38

【问题描述】：

我看到引导程序不固定行中列的高度。例如：图片 1:1，它会在列中响应，但图片的位置在行首。

如果我在heading 标签中有文本，它有默认的边距来推动下面的文本。因此图像将被绑定到顶部，而文本将略低于顶部。

如果我需要对列进行规范化并使其居中对齐怎么办？

我的问题是：

是否有本地引导方法来对齐列？ 如果它不支持这种对齐方式，我可以使用什么“hack”？我尝试了一些“hacks”，但它们会影响基本引导功能。

我到底需要做什么：

抱歉，很难在 jsfiddle 中制作它，它包含 Angular 指令和模板。举个例子：

我有一个生成这个的指令：

我需要在中间对齐图像，或者至少在heading 垂直开始。例如：

如果你想尝试，我做了这个jsfiddle。我只接受没有任何代码的解释。

我可以用一些“被黑”的 css 来修复它，但我想知道如何以正确的方式做到这一点。

【问题讨论】：

据我所知，Bootstrap 中没有原生的vertical-align 设置，您必须使用自定义 CSS。这个问题实际上有很多答案......我仅通过搜索“Bootstrap middle align”就找到了6个SO答案，所以你应该检查一下。

我知道这很常见。正如我所说，我尝试了一些自定义 css，但它完全影响了引导元素的定位。如果您知道好的方法，它可以正常工作并且不影响其他功能，您能否只显示链接，我可以在哪里阅读它？

我不知道具体的方法，而且我今天没有时间试验你的例子（工作快结束了。）如果明天还没有回答，我会更深入地研究它。对此感到抱歉。

@TimLewis - 没问题，几分钟后我要睡觉了。只是问你一个我可以阅读的来源。只是我发现了很多关于这个的文字，而且大部分文字（我测试过的所有内容）都不能正常工作。无论如何谢谢。如果您不知道任何解释问题的帖子，请不要试图在研究上浪费时间。这是我的工作。

【参考方案1】：

一种方法是在img 元素上使用 translateY，如下所示：

.v-center 
  position: relative;
  transform: translateY(50%);

您还需要将图像放入col-*-2..

演示： http://bootply.com/tVyuhaFoww

【讨论】：

感谢您的好回答。 transform 属性在大多数情况下都能很好地工作。我太困了，我现在就去睡觉。明天我会深入检查一下。如果没有更好的答案，我会接受。 我真的很喜欢。

@ish2f4f 你不需要把编辑摘要放在帖子里。

是的，我想——@approxiblue 它给了我一个最小的字符错误，虽然不确定当时的正确方法是什么。特别是因为编辑似乎很重要，尽管它只改变了一个字符

【参考方案2】：

在第一段顶部对齐图像的另一种方法是将您的设计分成两行。第一行包含标题，第二行包含图像、段落和链接。这与您上面的第二张图片非常相似，如果您希望它看起来是这样的话。

http://jsfiddle.net/404vska2/

<div class="row">
  <div class="col-xs-10 col-xs-push-2">
    <h4 class="ng-binding">Monaco make Bernardo Silva move permanent</h4>
  </div>
</div>
<div class="row">
  <img src="http://s12.postimg.org/gt71dlbd5/1421893782_flat_world_cup_icon_512_Socker_1.png"  class="col-xs-2">
  <div class="col-xs-10">
    <p class="ng-binding">Bernardo Silva's loan move from SL Benfica to AS Monaco FC has been made permanent, with the 20-year-old settling in well since his summer switch to France.</p>
    <span class="rss-news-date ng-binding">Jan 21, 2015</span>
    <p><a ng-href="http://www.uefa.com/uefachampionsleague/news/newsid=2204161.html?rss=2204161+Monaco+make+Bernardo+Silva+move+permanent" href="http://www.uefa.com/uefachampionsleague/news/newsid=2204161.html?rss=2204161+Monaco+make+Bernardo+Silva+move+permanent">Lean more</a> </p>
  </div>
</div>

【讨论】：

感谢您的回答。这可以在一些不同的情况下使用。我同意使用网格系统比使用自定义 CSS 更好。就我而言，这有一个缺点 - 如果标题有超过一行的文字，图像将被拉下。与其他兄弟元素的相同性将丢失。但是，这在其他一些情况下会很完美。我喜欢这个主意。