Question

ここ数か月で個人独学でＨＴＭＬ/ＣＳＳでサイトを作り始めているものです。四角の中に文字を中央に配置させたのを、いくつも並べ、幅が最大限に達したら、折り返しして、四角が次の行に行くようにしたいです。  display:table-cell;を使いましたが、幅最大限のさらに先まで一直線に並び折り返しがされなかったので、float:left;を追加したら、レイアウトはうまくいきましたが、vertical-align: middle;が効かなくなりました。レイアウトを崩さずに、四角の中の文字を上下中央配置するにはどうしたらいいでしょうか。
【ＨＴＭＬ】
<article>
<h2 class="linkmoto2"><a id="あ行">あ行</h2>
<ul class="mokuji">
<li><a href="#"><p><b>あ</b>い<br>う<br>え</p></a></li>

<li><a href="#"><p><b>あ</b><br>い<br>う</p></a></li>

<li><a href="#"><p><b>あ</b><br>い<br>う</p></a></li>

<li><a href="#"><p><b>あ</b><br>い<br>う</p></a></li>

<li><a href="#"><p><b>あ</b><br>い<br>う</p></a></li>

<li><a href="#"><p><b>あ</b><br>い<br>う<br>え</p></a></li>


<li><a href="#"><p><b>あ</b><br>い<br>う</p></a></li>

<li><a href="#"><p><b>あ</b><br>い<br>う<br>え</p></a></li>

<li><a href="#"><p><b>あ</b><br>い<br>う)<br>え</p></a></li>

<li><a href="#"><p><b>あ</b><br>い<br>う</p></a></li>

<li><a href="#"><p><b>あ</b><br>い<br>う</p></a></li>

<li><a href="#"><p><b>あ</b><br>い<br>う</p></a></li>


<li><a href="#"><p><b>あ</b><br>い<br>う</p></a></li>

<li><a href="#"><p><b>あ</b><br>い<br>う<br>え</p></a></li>
<li><a href="#"><p><b>あ</b><br>い<br>う<br>え</p></a></li>

</ul>
<article>
【ＣＳＳ】
ul.mokuji {
    display:table;
    table-layout: fixed;
    width:1000px;
    border-collapse:separate;
    border-spacing:10px 10px;
}



ul.mokuji li {
    display:table-cell;
    float:left;
    vertical-align: middle;
    text-align:center;
    background-color:rgb(番号);
    width:160px;
    height:160px;
    margin: 10px 10px;

}

ul.mokuji li a {
    display:block;
    text-decoration:none;
    color:#番号;

}

ul.comics_menu li:hover{
background-color: rgb(番号);
color: #番号;


}