使用CSS的文本和图像定位

问题描述：

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

这是它的外观在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>

整个页面代码在这里起作用。你能发布所有的HTML吗？ – KatieK 2010-10-06 17:17:57

@KatieK - 更新了这个问题，但它非常简单，因为我一直在测试这个。谢谢！ – Martin 2010-10-06 17:56:22

答

将文字定位为文字是一项混乱的业务。我会将图像移动到您的h1标记之外并将其浮动，然后使用边距调整位置。事情是这样的：

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

好吧，我想到了这个解决方案，但是想要把它拿到里面去，如果可能的话。 – Martin 2010-10-06 18:09:15

答

也许这将是最好的去除img标签，并独自做到这一点在CSS：

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

答

不知道这增加了什么，但如果你在Firefox浏览你的网页，然后使用萤火虫追捕元素，您可能会注意到@ font-face网页字体并未在其高度线的中央垂直排列。我对字体知之甚少，不知道这是否是一个字体文件问题，但我用我们这一代的字体松鼠，这似乎是人们认为最可靠的选择。

解决方法

我的字体（“消灭”）被一字排开非常沉重朝下方。所以如果我没有包含足够的空间，它看起来在底部被切断。两种解决方案都有效：

如果您的元素没有中断：将行高设置为字号的两倍。
如果元素中断：将元素底部的填充添加到等于或略小于字体大小的元素的底部。

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

嗨克里斯，欢迎来到SO！请记住，答案不是帖子，因此我们尽量不要包含salutations，标语或签名。另外，我建议你阅读[faq]。 – Roflo 2012-11-30 03:58:04

使用CSS的文本和图像定位

相关推荐