• このエントリーをはてなブックマークに追加

縦横の中心に配置したい

HTML+CSSで、flexを使って配置するとうまくいく。

HTML

<div class="list">

<ul>
<li><a href="#"><span><img src="images/img-1.png" alt=""></span></a></li>
<li><a href="#"><span><img src="images/img-2.png" alt=""></span></a></li>
<li><a href="#"><span><img src="images/img-3.png" alt=""></span></a></li>
<li><a href="#"><span><img src="images/img-4.png" alt=""></span></a></li>
<li><a href="#"><span><img src="images/img-5.png" alt=""></span></a></li>
</ul>

</div><!-- /.logo-list -->

display:flexのCSS

デフォルトではストレッチが選択されているため、align-items:stretch;が必要ないところもあるかもしれないが、説明の便宜上記述している。

*{
margin:0;
padding:0;
}
.list ul{
display:flex;
flex-wrap:wrap;

width:100%;
}
.list ul li{
display:flex;
align-items:stretch;

width:180px;
margin:0 20px 20px 0;
}
.list ul li:last-child{
margin:0 0 20px;
}
.list ul li a{
display:flex;
align-items:center;

width:calc(180px - 2px);
padding:9px 0;
border:solid 1px #707070;
}
.list ul li a span{
display:block;
width:100%;
}
.list ul li a img{
display:block;
margin:0 auto;
}