Question

当我在资源管理器中的兼容模式中将它们漂浮在图像上时，我遇到了标题标记的问题。

<img src="1.gif" style="float: left; margin-right: 10px"><h1>Some headline</h1>

图片类似于100px高，默认情况下文本居中于中间位置，但它应该具有兼容性模式。

如何修复以使其垂直对齐中心？

/ Molgan

Answer 1

是否有特殊需要将H1标签浮动到图像旁边？另一种方法是将图像作为背景分配给H1标签，然后使用css background-position和padding来定位文本和图像以正确显示。你能提供你的html标记或页面链接吗？

h1 { background: url(/path/to/my_image) 10px 15px no-repeat; padding: 20px; }

这会将您的图像作为H1的背景，例如，将其从左侧放置10px，从顶部放置15px。

Answer 2

为什么浮动图像？节省一些时间并将图像放在标题标签中，然后您可以使用垂直对齐来定位它。

JsFiddle solution

我可以检查跨浏览器。

Answer 3

这不是“纯CSS”，但它 “IE-proof”！

<table>
  <tr>
    <td style="margin-right: 10px">
      <img src="1.gif">
    </td>
    <td valign="middle">
      <h1>Some headline</h1>
    </td>
  </tr>
</table>

浮动图像时的标题问题

3 个答案: