html - 两个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 中添加无序列表，这 2 个 div 垂直对齐被破坏

我怎样才能解决这个问题？

Answer 1

你需要使用vertical-align: top;

演示

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

我建议你使用float: left;而不是在inline-block;这里使用

浮动演示（不要忘记清除浮动）

Answer 2

尝试

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