全面でリンクしているセルの中の文字を中段で表示させたい

下記のソースは、<td>から</td>までの全面でリンクするようにしているのですが、その中の文字位置が、中央はできるのですが、中段ができません。
文字を中段で表示させるためには、どのような設定にすればよいのでしょうか？

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--
table.sample {
	width: 520px;
}

table.sample td{
	width: 520x;
	height: 30px;
	text-align: center;
	vertical-align: bottom;
	font-size: 12px;
	color: #404040;
	border: 1px solid #c7c7bc;
	background-color: #ececec;
}

table.sample td a{
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
}

table.sample td a:hover{
	background-color:#ffcccc;
}

 -->
 </style>

 </head>
 <body>
<table cellpadding="0" class="sample">
<tr>
<td><a href="hoge.html">文字をセル中央・中段で表示したい。</a></td>
</tr>
</table>
</body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

CSS
1table.sample td a {
2    line-height: 30px;
3}

-- 10:20 追記。
flexを使う場合。

CSS
1table.sample td a {
2    display: flex;
3    align-items: center;
4    justify-content: center;
5}

投稿2017/12/07 01:07

編集2017/12/07 01:23

x_x

総合スコア13749

chromeのみでしか確認してませんが、以下のような感じで出来ました。
div要素追加していますが、要素の追加が認められないのであれば、対応厳しいかもしれません。

html
1<table cellpadding="0" class="sample">
2  <tr>
3    <td>
4      <div>
5        <a href="hoge.html">文字をセル中央・中段で表示したい。</a>
6      </div>
7    </td>
8  </tr>
9</table>

css
1table.sample td div{
2  display: table;
3  width: 100%;
4  height: 100%;
5}
6
7table.sample td a{
8  text-decoration: none;
9  display: table-cell;
10  width: 100%;
11  height: 100%;
12  vertical-align: middle;
13}