列中的垂直對齊內容

我需要使用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

列中的垂直對齊內容

回答

相關問題