項目選択肢のカスタマイズで、項目名が縦方向中央位置に来ない

Question

お世話になっております。

先ほど質問した内容の続きです。
2つに渡り、申し訳ございません。

項目選択肢を、以前のフォーラムにあったものを参考にし、ほぼ作成できました。
ですが、項目名がなぜか少し上よりに表示されてしまい、
縦方向の中央位置に来ません。

下記、共通説明文（大）テンプレートの該当箇所です。
お手数おかけしますが、よろしくお願いいたします。


↓↓↓　以下、共通説明文に登録している内容です。　↓↓↓


/*7.項目選択肢、名前部分の背景色と文字色、大きさを変更
***************************************/
select[name="choice"]{
	height:30px;
	border-radius: 5px;
}

.choice{
	display:block;
	margin:10px 0px 7px 0px;
	border-style:none;
	background-image:url("画像url");
	background-repeat:no-repeat;
	background-position:right center;
	width:400px;
	height:30px;
	padding:15px 0px 0px 15px;
}

div#rakutenLimitedId_aroundCart table tr td span.choice {
	display: block;
	font-size: 16px; /* 文字の大きさ */
	color: #2D170F; /* 文字色 */
	vertical-align: middle; /* 文字位置(水平) */
	text-indent: 10px; /* 行頭に入れるスペースの幅 */
	width: 450px; /* 全体（背景色が適用される部分）の幅 */
	margin: 15px 0 0 0; /* 周りの要素との間隔（上・右・下・左方向） */
	padding: 4px 0; /* 内側の余白の幅（上下方向・左右方向） */
}

Accepted Answer

ECマスターズの田中です。

「.choice」において、
高さは３０ピクセルに設定されているものの、
一行あたりの高さが指定されていないため、
自動設定となり、その結果の中で中央に配置されておりました。

.choice { と } の間に、
line-height: 30px;
を加えていただくと、
３０ピクセルの高さを持つ１行の中で中央揃えとなり、
ご希望の位置に表示されますので
お試しいただきますようお願いします。

Answer

ご回答ありがとうございます。
見事に中央に配置されました。

いつも迅速なご回答、ありがとうございます。