如何在这个包装器中垂直对齐中间div2和div3？

Question

我花了几个小时试图找出如何垂直对齐中间.div2和.div3？ 希望有人可以帮助我。 非常感谢。 你们是最棒的。 任何答案将不胜感激。

 <style>
        *{
            margin:0;
            padding:0;
        }
        .wrapper{
            border: 4px solid black;
            width:900px;
            height:100px;
            text-align: center;
            display: table;
        }
        .div1,.div2,.div3{
            background: gray;
        }
        .left{
            float: left;
        }
        .right{
            float:right;
        }
        .center{
            display: inline-block;
            margin:0 auto;
            line-height: auto;
        }
        .clear{
            clear:both;
        }
        span{
            display: table-cell;
            vertical-align: middle;
        }
    </style>

<div class="wrapper">
    <span>
        <div class="left div1">
            <p>div1</p>
            <p>div1</p>
            <p>div1</p>
        </div>
        <div class="center div2">
            <p>div2</p>
        </div>
        <div class="right div3">
            <p>div3</p>
            <p>div3</p>
        </div>
    </span>
</div>

Answer 1

试试这个css

<style>
p { margin: 0px; padding: 0px;  background: none repeat scroll 0 0 #808080;
    }
.div1, .div2, .div3 {
    display: table-cell; 
    vertical-align: middle;
    width: 450px;
}

</style>

演示

Answer 2

请检查以下代码。

网址： http ： //jsfiddle.net/VqGJN/

  <div class="wrapper">
<span>
    <div class="left div1 cell">
        <p>div1</p>
        <p>div1</p>
        <p>div1</p>
    </div>
    <div class="center div2 cell">
        <p>div2</p>
    </div>
    <div class="right div3 cell">
        <p>div3</p>
        <p>div3</p>
    </div>
</span>

css：

.wrapper {
    display:table;
}
.wrapper span {
    display:table-row;
}
.wrapper .cell {
    display:table-cell;
    width:200px;
    vertical-align:middle;
}

Answer 3

使用display: inline-block :( 在HTML中添加内包装到内容 ）

CSS

    * {
        margin:0;
        padding:0;
    }
    .wrapper {
        border: 4px solid black;
        width:900px;
        height:100px;
        text-align: center;
        display: table;
    }
    .div1, .div2, .div3 {
    }
    .center, .left, .right {
        display: inline-block;
        width: 33%;
        vertical-align:middle;
        line-height: auto;
    }
    .clear {
        clear:both;
    }
    span {
        display: table-cell;
        vertical-align: middle;
    }
    .left > div {
        float: left;
    }
    .right > div {
        float: right;
    }
    .center > div {
        display: inline-block;
        margin: 0 auto;
    }
    .inner-wrapper {
        background: gray;
    }

工作小提琴