兩格垂直對齊問題

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;
}