两个div垂直对齐问题

Question

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    outline: 1px solid red;
}

<div></div>
<div>
    <ul>
        <li>1</li>
    </ul>
</div>

连续2个div 在其中一个div中添加无序列表，这两个div垂直对齐已损坏

我该如何解决这个问题？

Answer 1

您需要使用vertical-align: top;

Demo

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    outline: 1px solid red;
    vertical-align: top; /* <----- Here */
}

我建议您使用float: left;而不是inline-block;

Float Demo（别忘了清除漂浮物）

Answer 2

试

div{
 vertical-align: middle;
 text-align: center;
}