Question

我在使用CSS定位带有图像的文本时遇到问题。它适用于Firefox和IE，但不适用于Safari。图像位于文本的左侧，我希望文本在垂直定位中位于图像的中心。我正在使用自定义字体（MyriadProLight），使用font-face。

这就是它在Safari中的样子： http://oi52.tinypic.com/2eg5p8x.jpg

这就是我想要的（以及它在Firefox和IE中的外观）： http://oi54.tinypic.com/1zg3xhx.jpg

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

    <head>
        <title>Title</title>
        <style>

            @font-face {
            font-family: 'MyriadProLight';
            src: url('myriadpro-light-webfont.eot');
            src: local('☺'), url('myriadpro-light-webfont.woff') format('woff'), url('myriadpro-light-webfont.ttf') format('truetype'), url('myriadpro-light-webfont.svg#webfontpR0gSEvM') format('svg');
            font-weight: normal;
            font-style: normal;
            }

            h1 
            {
                font-size: 20pt;
                font-family: "MyriadProLight", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
                color: #333;
                text-transform:uppercase;
                line-height: 21pt;
                font-weight: normal;
                letter-spacing: 0px;
                margin: 0px 0px 10px 0px;
                padding: 0px;
            }

            .iconimage
            {
                margin-right: 7px;
                vertical-align: middle;
            }

        </style>
    </head>
    <body>
        <h1><img class="iconimage" src="image.png" />This is the header</h1>
    </body>
</html>

Answer 1

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

WORKAROUNDS

我的字体（'Destroy'）排在底部。因此，如果我没有足够的空间，它看起来就像是在底部被砍掉了。两种解决方案有效：

如果你的元素没有破坏：让line-height加倍字体大小。
如果元素断开：在元素底部添加填充等于或略小于font-size。

显然（或许不是这样，对不起），我正在处理标题等。我不知道这些是否适用于段落或其他多行元素。

Answer 2

将图像与文本内嵌在一起是一件混乱的事情。我会将图像移到h1标签之外并向左浮动，然后用边距调整放置位置。像这样：

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

Answer 3

也许最好删除img标签并仅在CSS中执行：

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

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

3 个答案: