html - 如何使用CSS:两个元素都垂直居中，并 float 到相对的两侧(示例)

简而言之，我想要一个标头，该标头的两边都漂浮着并且垂直居中：



我从使用非浮动元素开始做起，并设法制作了this example。

但是一旦添加float:left或float:right，垂直居中就会丢失（我知道为什么了，因为它不再是流程的一部分）

我想知道什么是实现此目标的最佳方法。完全可以接受CSS重新设计。

提前致谢！

最佳答案

垂直居中可能会很痛苦，尤其是当您不处理内联元素时。在这种情况下，我建议您使用display:table-cell。

的HTML

       <div id="wrapper">
            <div class="cell">
                <div class="content">
                    Content Goes here
                </div>
            </div>
            <div class="cell">
                <div class="content2">
                    <div class="redbox">
                    </div>
                </div>
            </div>
        </div>

的CSS

            #wrapper {
                color: white;
                display: table;
                border: 1px solid darkblue;
                background: blue;
                width: 100%;
            }

            .cell {
                display: table-cell;
                vertical-align: middle;
                height: 200px;
            }

            .content {
                float: left;
            }

            .content2{
                float: right;
            }

            .redbox {
                border: 2px solid darkred;
                background: red;
                height: 75px;
                width: 75px;
            }

示例：http://jsfiddle.net/YBAfF/

关于html - 如何使用CSS:两个元素都垂直居中，并 float 到相对的两侧(示例)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13798722/