垂直對齊引導山口

我需要垂直對齊小的自舉列單元格...垂直對齊引導山口

的想法是，我不能硬編碼在像素東西（height, line-height，例如通過），一切都應該是相對的，原因我不知道綠色細胞的高度（因內容而異）。

的top +50 & translateY -50似乎不工作...

的CodePen is here。該代碼是波紋管：

.a{background: lightgreen;} 
 
.b{background: yellow;} 
 
.cont {background:orange;} 
 
.vcenter {top: 50%; transform:translateY(-50%);}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
<div class="col-xs-12 cont"> 
 
    <div class="a col-xs-8"> 
 
    <img src="http://lorempixel.com/100/150"> 
 
    some description 
 
    </div> 
 
    <div class="b vcenter col-xs-4"> 
 
    This should be middle aligned vertically! 
 
    </div> 
 
</div>

來源

2017-06-01 Serge

我從你皮特只有一個答案，謝謝@tsdln回答不符合最初的OP條件... – Serge

這將是一個有效的答案然後：不可能在CSS中做，改變顯示，確定，但不適用於容器 – Serge

@Pete你能請轉貼你的回答與柔性？！也許我可以使用它，最後，進行一些更改以適應Flex顯示屏... – Serge

由於@Pete發現然而需要影響容器的顯示解決方案：

.cont { display: flex; } 
.vcenter { align-self: center; }

來源

2017-06-01 14:31:51 Serge

垂直對齊引導山口

回答

相關問題