在分割框中垂直居中文本＆amp;兄弟姐妹盒

Question

如何将文字集中在一个＆＃39; One＆＃39;垂直于父盒＃＃container＆＃39;在不使用表的情况下，在以下代码中仅使用CSS 2.1？文字＆＃39; 2.1＆＃39;和文字＆＃39; 2.2＆＃39;还需要在绿色框中垂直居中。

    <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;
}

从height:100%;

中删除#col-1, #col-2

点击此处Fiddle。