サンプル
「display: table-cell;」「vertical-align: middle;」を使った上下左右中央揃えのサンプルです。
少し階層が深くなっていますが、他の箇所に影響を与えたくない場合等に利用できるかと思います。
サンプルhtml
<ul>
<li><a href=""><p><span>テキスト</span></p></a></li>
<li><a href=""><p><span>テキスト<br>テキスト</span></p></a></li>
<li><a href=""><p><span>テキスト</span></p></a></li>
</ul>サンプルcss
li {
display: inline-block;
width: 120px;
margin-right: -1px;
border: 1px solid #ccc;
vertical-align: top;
}
li a {
display: block;
}
li a:hover span {
background: #f0f0f0;
}
li p {
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
}
li span {
display: table-cell;
height: 80px;
padding: 5px;
background: #fff;
vertical-align: middle;
}サンプルsass
li {
display: inline-block;
width: 100px;
border: 1px solid #ccc;
vertical-align: top
a {
display: block;
&:hover {
span {
background: #E0E0E0;
}
}
}
p {
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
}
span {
display: table-cell;
height: 50px;
padding: 5px;
background: #fff;
vertical-align: middle;
}
}「display: table-cell;」の場合「min-height」が効かないため、高さは「height」でpx固定していますが、「display: table-cell;」 を指定している場合、中の要素が増えるとheightもそれに合わせて増加してくれるため、「min-height」と同じ感覚で使用できます。