列中的垂直对齐内容

我需要使用Bootstrap垂直对齐列中的内容。我通过将下面的CSS代码添加到行中来完成整个内容块。但是我无法复制这个在一行内的列上工作。我正试图避免为这个特定项目设置flexbox。我尝试过在某一点使用表格单元格，但它将整个行集中，我不确定它是否与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%); 
}

来源

2017-07-24 user5854648

你设置该行的高度？ – jhpratt

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

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

.row { 
    position: relative; 
}

来源

2017-07-24 23:04:46

就是这样！伟大的解决方案，因为在这种情况下，我不想在这种情况下使用100％的高度，因为垂直元素在页面上的另一个元素内。 – user5854648

很高兴它为你工作 –

我想你想最后一栏的内容垂直居中整个行的内容。纠正我，如果我错了我的假设。基本上，当你使用float（引导程序将它用于列）时，每个元素都会占据其内容的高度，所以为了实现某种垂直居中元素，所有元素（或者至少是最后一个元素您的案例中的列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，并放入一些custo米的风格。

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%; 
}

注：当然你可以覆盖从最后一个例子样式的引导方式，但这种方式你可能会有一些风格穿越，这会导致不必要的行为。

来源

2017-07-24 20:58:09

一种方法是使用上.row弯曲，与：

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

来源

2017-07-24 23:31:07 Johannes

列中的垂直对齐内容

回答

相关问题