使用css进行文本和图像定位

我在使用CSS定位带有图像的文本时遇到问题。它在Firefox和IE中运行良好，但在Safari中不起作用。图像位于文本的左侧，我希望文本在垂直位置位于图像的中心。我使用的是自定义字体（MyriadProLight），使用的是字体脸

这是Safari中的外观：

这就是我想要的（以及它在Firefox和IE中的外观）：

HTML:

标题
@字体{
字体系列：“MyriadProLight”；
src:url（'myriadro-light-webfont.eot'）；
src:local（'☺'), url（“myriadro-light-webfont.woff”）格式（“woff”）、url（“myriadro-light-webfont.ttf”）格式（“truetype”）、url（“myriadro-light-webfont.svg”格式（“svg”）；
字体大小：正常；
字体风格：普通；
}
h1
{
字号：20pt；
字体系列：“MyriadProLight”、“Lucida Grande”、“Lucida Sans Unicode”、Arial、Sans serif；
颜色：#333；
文本转换：大写；
线路高度：21pt；
字体大小：正常；
字母间距：0px；
保证金：0px 0px 10px 0px；
填充：0px；
}
.图像
{
右边距：7px；
垂直对齐：中间对齐；
}
这是标题

将图像与文本内联定位是一件麻烦事。我会将图像移到h1标记之外并向左浮动，然后用边距调整位置。类似如下：

<img class="iconimage" src="mail.png" style="float:left; margin:10px" />
<h1>This is the header</h1>

这是标题

将图像与文本内联定位是一件麻烦事。我会将图像移到h1标记之外并向左浮动，然后用边距调整位置。类似如下：

<img class="iconimage" src="mail.png" style="float:left; margin:10px" />
<h1>This is the header</h1>

这是标题

也许最好删除img标记，并单独使用CSS：

h1 {
    padding: 0 0 0 30px;
    background: url(image.png) no-repeat left;
}

---

也许最好删除img标记，并单独在CSS中执行：

h1 {
    padding: 0 0 0 30px;
    background: url(image.png) no-repeat left;
}

---

不确定这会增加什么，但如果你在Firefox中查看页面，然后使用firebug查找元素，你可能会注意到@font-face web字体没有垂直排列在其线条高度的中心。我对字体了解不够，不知道这是否是字体文件的问题，但我用font squirrel，w人们似乎认为这是最可靠的选择

变通办法

我的字体（‘Destroy’）排得很靠下。因此，如果我没有足够的空间放它，它的底部看起来会被切掉。有两种解决方案有效：

如果您的元素是非中断的：将行高设置为字体大小的两倍

如果元素中断：在元素底部添加等于或略小于字体大小的填充

---

显然（或者可能不是这样，对不起），我处理的是标题之类的内容。我不知道这些内容是否适用于段落或其他多行元素。

不确定这是否会增加任何内容，但如果您在Firefox中查看页面，然后使用firebug搜索该元素，您可能会注意到@font-face web字体没有在其行高的中心垂直排列。我我对字体了解不够，不知道这是否是字体文件问题，但我这一代人都使用字体松鼠，人们似乎认为它是最可靠的选择

变通办法

我的字体（‘Destroy’）排得很靠下。因此，如果我没有足够的空间放它，它的底部看起来会被切掉。有两种解决方案有效：

如果您的元素是非中断的：将行高设置为字体大小的两倍

如果元素中断：在元素底部添加等于或略小于字体大小的填充

---

显然（或者可能不是这样，对不起），我处理的是标题之类的。我不知道这些是否适用于段落或其他多行元素。

整个页面代码在这里起作用。你能发布所有HTML吗？@KatieK-更新了问题，但它确实是简单的HTML，因为我已经测试了很多。谢谢！整个页面代码在这里起作用。你能发布所有的HTML吗HTML？@KatieK-更新了问题，但它确实是简单的HTML，因为我已经测试了很多。谢谢！好的，我想到了这个解决方案，但如果可能的话，我想把它放在里面。好的，我想到了这个解决方案，但如果可能的话，我想把它放在里面。嗨，克里斯，欢迎这么做！请记住，答案不是帖子和文章因此，我们尽量不包括问候语、标语或签名。此外，我建议您阅读。嗨，克里斯，欢迎来到SO！请记住，答案不是帖子，因此我们尽量不包括问候语、标语或签名。此外，我建议您阅读。