tableタグを使わず、要素を上下左右中央に配置する
201908追記
高さの中央方法
.outer{
display: table;
width: 100%;
}
.inner{
display: table-cell;
vertical-align: middle;
}
201807追記
.outer{
position: relative;
}
.inner{
position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%);
}
でもOKです。
<ul>
<li><p><img src=”1.jpg”></p></li>
<li><p><img src=”2.jpg”></p></li>
<li><p><img src=”3.jpg”></p></li>
<li><p><img src=”3.jpg”></p></li>
<li><p><img src=”1.jpg”></p></li>
<li><p><img src=”2.jpg”></p></li>
</ul>
<style type=”text/css”>
li{
float:left;
margin:0 20px 20px 0;
}
p{
display:table-cell;
width:220px;
height:220px;
layout-grid-line:220px;
text-align:center;
vertical-align:middle;
border:1px solid #CCC;
}
</style>
