html - 不能垂直对齐两个div

Question

所以我试图并排对齐 2 个 div。这是我的标记

    <div id="DIV_1">
    <div id="DIV_2">
    </div>
    <div id="DIV_3">
        <div id="DIV_4">
            <div id="DIV_5">
                0
            </div>
            <div id="DIV_6">
                Likes
            </div>
        </div>
        <div id="DIV_7">
            <div id="DIV_8">
                 <a href="#" id="A_9">1</a>
            </div>
            <div id="DIV_10">
                Followers
            </div>
        </div>
    </div>
</div>

还有我的 CSS

    #DIV_1 {
    height: 81px;
    width: 864px;
    perspective-origin: 432px 40.5px;
    transform-origin: 432px 40.5px;
    font: normal normal normal 16px/normal sans-serif;
}/*#DIV_1*/

#DIV_2 {
    height: 40px;
    width: 40px;
    perspective-origin: 20px 20px;
    transform-origin: 20px 20px;
    background: rgb(0, 157, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    font: normal normal normal 16px/normal sans-serif;
}/*#DIV_2*/

#DIV_3 {
    height: 41px;
    text-align: center;
    width: 187px;
    perspective-origin: 93.5px 20.5px;
    transform-origin: 93.5px 20.5px;
    font: normal normal normal 16px/normal sans-serif;
    margin: 0px 338.5px;
}/*#DIV_3*/

#DIV_4 {
    color: rgb(70, 70, 70);
    display: table-cell;
    height: 33px;
    text-align: center;
    text-decoration: none solid rgb(70, 70, 70);
    vertical-align: middle;
    width: 92px;
    perspective-origin: 46.5px 20.5px;
    transform-origin: 46.5px 20.5px;
    border-top: 0px none rgb(70, 70, 70);
    border-right: 1px solid rgb(146, 146, 146);
    border-bottom: 0px none rgb(70, 70, 70);
    border-left: 0px none rgb(70, 70, 70);
    font: normal normal normal 16px/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(70, 70, 70) none 0px;
    padding: 4px 0px;
}/*#DIV_4*/

#DIV_5 {
    color: rgb(70, 70, 70);
    height: 17px;
    letter-spacing: 0.18000000715255737px;
    text-align: center;
    text-decoration: none solid rgb(70, 70, 70);
    width: 92px;
    perspective-origin: 46px 8.5px;
    transform-origin: 46px 8.5px;
    border: 0px none rgb(70, 70, 70);
    font: normal normal 500 15px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(70, 70, 70) none 0px;
}/*#DIV_5*/

#DIV_6 {
    color: rgb(70, 70, 70);
    height: 16px;
    letter-spacing: 0.3479999899864197px;
    text-align: center;
    text-decoration: none solid rgb(70, 70, 70);
    width: 92px;
    perspective-origin: 46px 8px;
    transform-origin: 46px 8px;
    border: 0px none rgb(70, 70, 70);
    font: normal normal 300 12px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(70, 70, 70) none 0px;
}/*#DIV_6*/

#DIV_7 {
    color: rgb(70, 70, 70);
    display: table-cell;
    height: 33px;
    text-align: center;
    text-decoration: none solid rgb(70, 70, 70);
    vertical-align: middle;
    width: 94px;
    perspective-origin: 47px 20.5px;
    transform-origin: 47px 20.5px;
    border: 0px none rgb(70, 70, 70);
    font: normal normal normal 16px/normal 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(70, 70, 70) none 0px;
    padding: 4px 0px;
}/*#DIV_7*/

#DIV_8 {
    color: rgb(70, 70, 70);
    height: 17px;
    letter-spacing: 0.18000000715255737px;
    text-align: center;
    text-decoration: none solid rgb(70, 70, 70);
    width: 94px;
    perspective-origin: 47px 8.5px;
    transform-origin: 47px 8.5px;
    border: 0px none rgb(70, 70, 70);
    font: normal normal 500 12px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(70, 70, 70) none 0px;
}/*#DIV_8*/

#A_9 {
    color: rgb(102, 153, 255);
    letter-spacing: 0.18000000715255737px;
    text-align: center;
    text-decoration: none solid rgb(102, 153, 255);
    border: 0px none rgb(102, 153, 255);
    font: normal normal 500 15px/17px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(102, 153, 255) none 0px;
}/*#A_9*/

#DIV_10 {
    color: rgb(70, 70, 70);
    height: 16px;
    letter-spacing: 0.3479999899864197px;
    text-align: center;
    text-decoration: none solid rgb(70, 70, 70);
    width: 94px;
    perspective-origin: 47px 8px;
    transform-origin: 47px 8px;
    border: 0px none rgb(70, 70, 70);
    font: normal normal 300 12px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(70, 70, 70) none 0px;
}/*#DIV_10*/

我已经尝试更改显示 和所有内容。出于某种原因，我无法让正方形与其他后续计数垂直对齐。这里还有一个演示 http://jsfiddle.net/z6jAA/1/

Answer 1

在#DIV_2和#DIV_3上添加display: inline-block，并在#DIV_3上移除边距>.

fiddle :http://jsfiddle.net/z6jAA/2/