html - 在拆分框和同级框中垂直居中文本

Question

如何在不使用表格的情况下，在以下代码中仅使用 CSS 2.1 使文本“One”相对于父框“#container”垂直居中？文本“2.1”和文本“2.2”也需要在绿色框中垂直居中。

    <div id="container">
            <div id="col-1">
                One
            </div>
            <div id="col-2">
                <span>2.1</span>
                <span>2.2</span>
            </div>
    </div>

    <style>
        #container {
            position: absolute;
            height: 100px;
            border: 1px solid crimson;
            vertical-align: text-bottom;
        }
        #col-1, #col-2 {
            display: inline-block;
            height: 100%;
        }
        #col-2 span {
            display: block;
            height: 48px;
            line-height: 48px;
            border: 1px solid green;
        }
    </style>

http://jsfiddle.net/wa3r7d6j/

Answer 1

只需更改 css:

#col-1, #col-2 {
display: inline-block;
vertical-align:middle;
}

从 #col-1, #col-2 中删除:height:100%;

检查 Fiddle在这里。