インラインブロックの順序付けられていないリストを中央に配置すると、2番目のリストが最下位に強制されます。

Question

divの中に2つの順序付けられていないリストを中央に配置しようとしています。これを行うために、私はこの基本戦略を使用して、の核心は、親divにtext-align: center性を付与して、子供にulのinline-block秒作っています。しかし

.area { 
 
    text-align: center; 
 
    border: 2px dashed red; 
 
    border-radius: 5px; 
 
    padding: 20px; 
 
    width: 75px; 
 
} 
 
.list { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    display: inline-block 
 
} 
 
.list li { 
 
    border: 1px solid pink; 
 
    margin-bottom: 3px; 
 
    padding: 5px; 
 
}

<div class="area"> 
 
    <ul class="list"> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    </ul> 
 
    <ul class="list"> 
 
    <li>hi</li> 
 
    <li>hi</li> 
 
    </ul> 
 
</div>

を、2 2番目のulのリストアイテムは、先頭から始まるのではなく、下に配置されます。

浮動は、この特定の問題を修正するようだが、私はそれが子供ul秒のheightを一致させるためには、親divにclearfixをしなければならないと、加えて、私の2つのul sがあるように、それはそうですもはやうまく中心に置かれなくなりました。

最初の行に合わせてulを取得する方法はありますか？要素は、デフォルトでinline-blockを設定しているため

Answer 1

はちょうど.listにvertical-align:topを設定vertical-align:baseline

.area { 
 
    text-align: center; 
 
    border: 2px dashed red; 
 
    border-radius: 5px; 
 
    padding: 20px; 
 
    width: 75px; 
 
} 
 
.list { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    display: inline-block; 
 
    vertical-align: top 
 
} 
 
.list li { 
 
    border: 1px solid pink; 
 
    margin-bottom: 3px; 
 
    padding: 5px; 
 
}

<div class="area"> 
 
    <ul class="list"> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    <li>sup</li> 
 
    </ul> 
 
    <ul class="list"> 
 
    <li>hi</li> 
 
    <li>hi</li> 
 
    </ul> 
 
</div>

です