【CSS】vertical-align:middle;が効かない時、aタグリンクのクリックできる範囲を広げたい時

CSSをいじっていて、vertical-align:middle;が効かなくなり、aタグリンクのクリックできる範囲も広げたかったので色々調べました。

軽い備忘録です。
例を上げつつコードを載せていきます。
これで文字が上下左右中央揃えの横並びのメニューが作れます。

では参ります。


vertical-align:middle;が効かない時

 まずindex.htmlを用意


<!DOCTYPE html>
<html lang="ja">
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<ul class="sample1">
		<li><a href="">test1</a></li>
		<li><a href="">test2</a></li>
		<li><a href="">test3</a></li>
		<li><a href="">test4</a></li>
	</ul>

	<ul class="sample2">
		<li><a href="">test1</a></li>
		<li><a href="">test2</a></li>
		<li><a href="">test3</a></li>
		<li><a href="">test4</a></li>
	</ul>
</body>
</html>

sample1とsample2を作りました。
sample1がうまくいく方で、
sample2がうまく効かない方
(ただの例)です。

CSSファイルを作る


/* table-cellだとmarginが効かないので以下で余白を作る */
.sample1 {
	border-collapse: separate;
	border-spacing: 3px 0;
}
/* sample1はtable-cellで縦横中央揃えに */
.sample1 li {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	height: 100px;
	background-color: orange;
}
/* aタグのリンクなのでクリックできる範囲を広げます */
.sample1 a {
	padding: 42px;
}

/* sample2はinline-blockで同じことをしようとしてみます(うまくいかない例です) */
.sample2 li {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	width: 100px;
	height: 100px;
	background-color: lightblue;
}
/* これも同じくaタグのリンクなのでクリックできる範囲を広げる */
.sample2 a {
	padding: 42px;
}
/* 今回はわかりやすいようにホバーで色を変えます */
a:hover {
	background-color: red;
}

コメントでちょろっと解説してます。

こんな感じになります。

上のオレンジがsample1です。
下の水色がsample2(間違いの例)です。

sample1はちゃんとvertical-align:middle;が効いていますね。

カーソルをtest1に合わせてみます。

ちゃんと色が変わりました。
.sample2のa要素にpaddingを加えているのでクリックできる範囲が広くなっています。
赤く色が変わったところ全部クリック可能です。

次にsample2(ダメな方)のtest2にカーソルを合わせてみます。

vertical-align:miggle;も効いてないし、ホバー時の赤色ボックスの位置もずれちゃっています。

まとめ

vertical-align:middle;で中央揃えをしたいときはdisplay:table-cell;を使うといいかもです。
他にもposisionでカスタマイズできますが、僕的にはdisplay:table-cell;の方が楽でした。

クリック範囲は必要に応じて.sample1のaタグのpaddingを変更してください。
隙間の幅はborder-spacingで調節できます。

軽い備忘録でした。



Posted

in

,