Question

我需要使用Bootstrap垂直对齐列中的内容。我已经使用下面的CSS代码通过将整个内容块添加到行中来完成此操作。我不能复制这个来处理行中的列。我试图避免这个特定项目的flexbox。我尝试在一个点使用table-cell但是它整个行都居中，我不确定它是否与Bootstrap有某种冲突。

了解如何运作以及如何解决这一问题。

HTML

<div class="row">
  <div class="col-sm-1">
  </div>
  <div class="col-sm-10">
    img class="img-responsive src="img/img1.jpg">
  </div>
  <div class="col-sm-1 vertical">
    <div>
      <p>Share</p>
      <img src=/img/icons/icon1.svg">
      <img src=/img/icons/icon2.svg">
      <img src=/img/icons/icon3.svg">
    </div>
  </div>
</div><!-- END ROW -->

CSS

.vertical{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 1

为了使用垂直居中的顶部/变换技巧，您需要使您想要的元素居中位置绝对且其父位置相对。

.vertical{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.row {
  position: relative;
}

Answer 2

我想你想让最后一列的内容垂直居中于整行的内容。如果我的假设错了，请纠正我。

基本上当你使用float（bootstrap将它用于列）时，每个元素都会占用它的内容的高度，所以为了实现某种垂直居中元素，所有元素（或者至少是最后一列）在您的情况下div和具有最大高度的列）必须具有相等的高度或使用绝对位置。

看起来最简单，最干净的方法（如果你知道最大列的高度），不需要覆盖这些特定列的一些引导样式就是将列的内容包装在另一个元素中（就像你一样）并且把高度：100％和位置：绝对的。像这样：

<强> HTML

    <div class="row">
      <div class="col-sm-1">
      </div>
      <div class="col-sm-10">
        <img class="img-responsive src="img/img1.jpg">
      </div>
      <div class="col-sm-1 col-to-be-aligned">
        <div class="vertical">
          <p>Share</p>
          <img src=/img/icons/icon1.svg">
          <img src=/img/icons/icon2.svg">
          <img src=/img/icons/icon3.svg">
        </div>
      </div>
    </div><!-- END ROW -->

<强> CSS

.col-to-be-aligned{
   height: 150px; // largest column height
}
.vertical{
   height: 100%;
   position: absolute;
   top: 50%;
   left: 0px; // if you want it left aligned
}

大多数时候你不会知道元素的确切高度，如果你不想使用display flex并覆盖bootstrap样式，我想到的是跳过最后一列作为bootstrap一个并为其添加一些自定义样式。

<强> HTML

    <div class="row relative-row">
      <div class="col-sm-1">
      </div>
      <div class="col-sm-10">
        <img class="img-responsive src="img/img1.jpg">
      </div>
      <div class="col-to-be-aligned">
          <p>Share</p>
          <img src=/img/icons/icon1.svg">
          <img src=/img/icons/icon2.svg">
          <img src=/img/icons/icon3.svg">
      </div>
    </div><!-- END ROW -->

<强> CSS

.relative-row{
    position: relative; // in order to work the below styles
 }
.col-to-be-aligned{
    position: absolute;
    width: 8.33% // the same as col-sm-1
    right: 0px;
    top: 50%;
}

注意：当然，您可以使用上一个示例中的样式覆盖引导样式，但这样您可能会遇到一些样式交叉，这会导致不必要的行为。

Answer 3

我能想到的一种方法是在.row上使用flex align-items: center;：

https://codepen.io/anon/pen/PKovGB

垂直对齐列中的内容

3 个答案: