嵌入塊上的垂直對齊（中間不工作）

我有3個div使用網格彼此相鄰。所有的div（列）都是內聯塊。我添加了3個類來控制div的垂直對齊（vtop，vmiddle，vbottom）。問題是，vtop和vbottom工作正常，但vmiddle沒有顯示任何操作。嵌入塊上的垂直對齊（中間不工作）

<div class="container"> 
<div class="row"> 
    <div class="col-desktop-4 vmiddle"> 
     COLUMN 1<br/> 
     Line 1 
    </div> 
    <div class="col-desktop-4"> 
     COLUMN 2<br/> 
     Line 1<br/> 
     Line 2<br/> 
     Line 3 
    </div> 
    <div class="col-desktop-4 vbottom"> 
     COLUMN 3<br/> 
     Line 1 
    </div> 
</div>

你有這是爲什麼不工作的任何想法？

的jsfiddle：http://jsfiddle.net/marcbaur/5rg0rs3v/7/

電賀馬克

來源

2014-10-29 mooonli

在CSS中使用Sass嗎？我不認爲它包含在小提琴中作爲外部資源。 – 2014-10-29 15:38:31

所有需要有財產，包括最高的股利http://jsfiddle.net/5rg0rs3v/9/ – DaniP 2014-10-29 15:38:39

嗨Danko。感謝實際工作的想法。但由於內容是動態生成的，我不知道哪個是最大的。爲什麼vertical-align：middle只能在最大的div上設置才能使用？ – mooonli 2014-10-29 15:48:20

參見：http://jsfiddle.net/5rg0rs3v/13/

首先，你應該編譯更少的代碼到CSS。

爲什麼垂直對齊方式將無法正常工作會等在http://phrogz.net/css/vertical-align/來解釋一個解決方案，可以發現：http://css-tricks.com/centering-in-the-unknown/

首先你包裹在額外的div內容：

<div class="col-desktop-4 vmiddle"><div> 
     COLUMN 1<br/> 
     Line 1</div> 
    </div>

而不是申請如下所示的CSS代碼：

.vmiddle:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 
.vmiddle { 
    display: inline-block; 
    vertical-align: middle; 
}

來源

2014-10-29 20:14:24

嵌入塊上的垂直對齊（中間不工作）

回答

相關問題