私はこのレイアウトを持っています:
私のCSS:
body {
background: #e2eaed;
}
a {
text-decoration: none;
color: #fff;
font-size: 30px;
height: 62px;
line-height: 62px;
/* vertical-align: middle is not works */
background: #8dc73f;
width: 132px;
padding: 0 25px;
font-size: 16px;
text-align: center;
font-weight: bold;
margin-left: 4px;
display: block;
float: left;
}
ボタンに1行のテキストがある場合、私のコードはうまく機能します。ただし、上の画像のように、ボタンに2行のテキストがある場合。プロパティを使用しているため、コードテキストの高さが大きくなっていline-height
ます。試しvertical-align
ましたが、動作しません。
jsfiddleを参照してください。