1

2 つのボタンを並べて配置しようとしています。1 つは画像、もう 1 つはテキストです。

ベースライン上で正しく整列しない理由がわかりません。

オフセットボタン

コードは次のとおりです。

<head>
  <style type="text/css">
  button {
    height: 20px;
  }
  </style>
</head>
<body>
  <button id="image-button">Some text
    <img src="http://www.famfamfam.com/lab/icons/mini/icons/application_firefox.gif">
  </button>
  <button id="text-button">Some text</button>
</body>

これに対する解決策が欲しいのですが、すべてのブラウザで一貫しているため、この動作の「理由」も理解したいと思っています。

また、画像で「float: left」を試してみましたが、Chrome では機能しません。

4

4 に答える 4

4

追加vertical-align: top

button {
    height: 20px;
    vertical-align: top
  }

このJSFiddleを確認してください

于 2013-09-05T16:42:50.057 に答える
0

これは、line-height を使用して修正できます。

button {
   height: 40px;
   line-height: 40px;
}

ここにフィドルがあります：http://jsfiddle.net/txdMZ/

于 2013-09-05T16:46:54.830 に答える
0

テキストと画像は下に並んでいますが、画像のサイズによって押し下げられています。設定してみるvertical-align: Text-top

詳細: http://css-tricks.com/what-is-vertical-align/

于 2013-09-05T16:44:15.977 に答える