html – 在拆分框和兄弟框中垂直居中文本

概述如何使用以下代码中的CSS 2.1而不使用表格,相对于父框“#container”垂直居中文本“One”？文本“2.1”和文本“2.2”也需要在绿色框中垂直居中. <div id="container"> <div id="col-1"> One </div> <div id="col-2"> 如何使用以下代码中的CSS 2.1而不使用表格,相对于父框“#container”垂直居中文本“One”？文本“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/

解决方法 只需更改CSS：

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

删除：高度：100％;来自#col-1,#col-2

在这里检查Fiddle.

总结

以上是内存溢出为你收集整理的html – 在拆分框和兄弟框中垂直居中文本全部内容，希望文章能够帮你解决html – 在拆分框和兄弟框中垂直居中文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。