文字の高さの違いをCSSで修正する<ボタンデザイン>

Go Yoshiwara

Go Yoshiwara

すごく基本的な事だったんですが、今日つまづいた箇所なのでメモ。

ボタンcss

上記の様なボタンを、CSSで作りました。

HTMLのソースは以下。

<div id="button">
 <span><a href="#">ボタン1</a></span>
 <span><a href="#">ボタン2</a></span>
 <span><a href="#">Button3</a></span>
</div>

これのaタグに色を付けて、上下左右にパディング取って、ボーダーを付けるだけのシンプルなやつ。

で、上記のボタンはgoogle chromeで見た時なんですが、なんの問題もありません。

ところが、IEで見ると英語のボタンだけ縦幅が大きい・・・。

微妙にずれてる・・・。

原因は、

#button{
	padding:10px 0 30px 0;
	text-align:center;
}
#button span{
	margin:0 15px;
	<strong>vertical-align:middle;</strong>
}
#button span a{
	padding:5px 25px;
	background:#f4efe1;
	border:1px solid #888;
	text-decoration:none;
	color:#333333;
}
#button span a:hover{
	padding:5px 25px;
	background:#99b000;
	border:1px solid #666;
	text-decoration:none;
	color:#fff;
}

vertical-align:middle;が必要だったみたいです。

これを入れたらIEでも・・・

ボタンcss

ちゃんと揃いました。

うーん、 以後気をつけよう。

この記事のシェア数

0

Go Yoshiwara
Go Yoshiwara 代表取締役会長 / 吉原 ゴウ

1982年生まれ。信濃中学校卒業。フリーターとして23歳まで様々な職業に従事し数々のスキルを身につける。ウェブデザイナーとして活躍したのち、25歳で起業し代表取締役に就任。自然あふれる場所で生まれ、アウトドアスポーツをして育ったが故にITの道を志したが、近年、再びアウトドアな環境、遊び、生き方を模索して長野県に移住。わくわくするものをつくり続けていたい。

自己紹介をもっと見る