Question

我有以下标记：

<div id="all">
<div id="one">one</div>
<div id="two">two</div>
<div id="main">main para goes here</div>
</div>

以及以下css：

#all{
    height: 300px;
    background: red;
}
#one{
    float: left;
}
#two{
    float: right;
}
#main{
    margin: 0 auto;
    width: 250px;
}

我想垂直对齐，但即使使用伪技术也没有成功。垂直对齐应至少工作ie8。

请注意：我无法更改标记。这意味着我无法避免使用浮动。

那么，有没有办法让它成功？

Answer 1

<强> Demo

使用flex-box

CSS

#all{
    height: 300px;
    background: red;
    display: flex;
    align-items:center
}
#one{
    float: left;
    order: 1;
}
#two{
    float: right;
    order: 3;
}
#main{
    margin: 0 auto;
    width: 250px;
    order: 2;
}

Answer 2

好吧，使用CSS浮动没有机会在它的容器中垂直对齐浮动元素（无论使用CSS灵活方框方法）。

因此我会选择inline-block s，以便我可以通过vertical-align: middle声明对齐它们。

到目前为止一切顺利，但#two元素必须位于容器的右侧，而不使用CSS浮点数。因此，我们必须指定to reorder the columns via relative positioning列的width：

要使此方法适用于 IE8 ，我们必须使用百分比单位作为宽度列。说我们最终会：

<强> EXAMPLE HERE

#all {
    height: 300px;
    width: 100%;

    font-size: 0; /* To remove the white-space between inline-block columns */
}

#all:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}


#one, #two, #main {
    display: inline-block;
    vertical-align: middle;
    position: relative;

    font-size: 16px; /* Reset the font-size to the default value */
}

#one, #two { width: 30%; }
#two { left: 40%; text-align: right; } /* Push the column to the right by 40% */
#main{ right: 30%; width: 40%; }       /* Pull the column to the left  by 30% */

这适用于 IE8 + （不记得IE6 / 7的要求）。但是对于 IE9 + ，我们可以使用calc()表达式来指定列的宽度，如下所示：

<强> Example Here

#one, #two {
    width: calc((100% - 250px) / 2);
}

#two{
    left: 250px;
    text-align: right;
}
#main{
    right: calc((100% - 250px) / 2);

    width: 250px;
    background-color: orange;
}

Answer 3

使用一些jquery和css，您可以轻松地将所需的元素集中在一起：

CSS

div{
    outline:solid gray 1px;
}
#all{
    height: 300px;
}
#one{
    float: left;
    position:relative;
}
#two{
    float: right;
    position:relative;
}
#main{
    margin: 0 auto;
    width: 250px;
    position:relative;
}

<强> JS

function center(element){
            var all = $("#all");
            if(element.height()<all.height()){
                  element.css(
                      "top",
                      ((all.height()/2)-(element.height()/2))+"px"
                  );  
            }
}

center($("#one"));
center($("#two"));
center($("#main"));

<强> FIDDLE

http://jsfiddle.net/ovkgzmdv/5/

垂直对齐浮动元素

3 个答案: