Question

我使用网格将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/

电贺马克

Answer 1

请参阅：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;
}

内联块上的垂直对齐（中间不起作用）

1 个答案: