Question

我正在尝试并排放置两个按钮，一个带图像，一个带文字。

我无法弄清楚为什么他们没有在基线上正确对齐。

Offset buttons

以下是代码：

<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上无效。

Answer 1

添加 vertical-align: top

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

选中此JSFiddle

Answer 2

你的问题是两件事，一个是图像突然显示该文本的行高，因为它显示为内联。两个浏览器不一致地支持vertical-align。查看之前的答案，其中一些可以在Chrome中使用，但不适用于Firefox。

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

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

Working fiddle

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

Answer 3

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

更多详情：http://css-tricks.com/what-is-vertical-align/

Answer 4

您可以使用line-height修复此问题：

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

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

如何获取带有图像的HTML按钮以与文本按钮对齐？

4 个答案: