1

I'm trying to have two buttons side by side, one with an image, one with text.

I can't figure out why they don't line up correctly on the baseline.

Offset buttons

Here's the code:

<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>

I'd love a solution to this, but I'd also love to understand the "why" of this behavior, since it is consistent on all browsers.

Also, I've tried "float: left" on the image, but that doesn't work on Chrome.

4

4 回答 4

4

添加vertical-align: top

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

检查这个JSFiddle

于 2013-09-05T16:42:50.057 回答
1

您的问题是两件事，一是图像由于内联显示而提高了该文本的行高。第二，浏览器的支持vertical-align不一致。查看以前的答案，其中一些适用于 Chrome，但不适用于 Firefox。

我最好的解决方案——适用于我测试的所有浏览器——是重新定义图像的处理方式并使其成为块元素，然后将其浮动到文本的右侧。这样图像不会影响文本的对齐方式。这样做的缺点是您需要为按钮定义一个绝对宽度，以确保图像不会被换行到文本下方的行。这是用于此的CSS：

button {
    height: 20px;
    width: 100px;
}
img {
    display: block;
    float: right;
}

工作小提琴

另一种解决方案是在按钮上使用背景图像而不是 img 标签，但是您需要在该按钮的右侧定义一个填充来为图像腾出空间。但是随后您会丢失浏览器放置在按钮上的默认样式，因此您将不得不处理它。

于 2013-09-05T16:56:10.900 回答
0

文本和图像在底部排列，但被图像的大小向下推。尝试设置vertical-align: Text-top

更多细节：http ://css-tricks.com/what-is-vertical-align/

于 2013-09-05T16:44:15.977 回答
0

您可以使用 line-height 解决此问题：

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

这里有一个小提琴：http: //jsfiddle.net/txdMZ/

于 2013-09-05T16:46:54.830 回答