Question

我知道有很多次被问过，而我正在努力编写答案，但却找不到对我有用的东西。这是我的代码：

 <div style="position:relative; overflow:hidden; height:35px">
            <table style="width:100%; height:100%;">
                <tr>
                    <td style="vertical-align:middle;">
                        <div style="float:left">
                            <img src="image1.png">
                            <img src="image2.png">
                        </div>
                        <div style="float:right;height:30px" class="panel panel-default">
                            <img src="image3.png">
                        </div>
                        <div style="float:right;width:250px;height:30px" class="panel panel-default"></div>
                    </td>
                </tr>
            </table>
        </div>

Demo

我想要的是让所有内部div在中间垂直对齐。有人可以帮忙吗？

由于

Answer 1

你应该使用内联块

<style>
    .my_div {position:relative; overflow:hidden; height:35px;}
    .my_div table {width:100%; height:100%;}
    .my_td div {display: inline-block; vertical-align:middle;}
</style>

<div class="my_div">
    <table>
        <tr>
            <td class="my_td">
                <div>
                    <img src="image1.png">
                    <img src="image2.png">
                </div>
                <div class="panel panel-default">
                    <img src="image3.png">
                </div>
                <div class="panel panel-default"></div>
            </td>
        </tr>
    </table>
</div>

如何在表格单元格中垂直居中div

1 个答案: