使用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>

來源

2010-10-06 Martin

整個頁面代碼在這裏起作用。你能發佈所有的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>

來源

2010-10-06 18:07:38

好吧，我想到了這個解決方案，但是想要把它拿到裏面去，如果可能的話。 – Martin 2010-10-06 18:09:15

也許這將是最好的去除img標籤，並獨自做到這一點在CSS：

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

來源

2010-10-06 19:23:51

不知道這增加了什麼，但如果你在Firefox瀏覽你的網頁，然後使用螢火蟲追捕元素，您可能會注意到@ font-face網頁字體並未在其高度線的中央垂直排列。我對字體知之甚少，不知道這是否是一個字體文件問題，但我用我們這一代的字體松鼠，這似乎是人們認爲最可靠的選擇。

解決方法

我的字體（「消滅」）被一字排開非常沉重朝下方。所以如果我沒有包含足夠的空間，它看起來在底部被切斷。兩種解決方案都有效：

如果您的元素沒有中斷：將行高設置爲字號的兩倍。
如果元素中斷：將元素底部的填充添加到等於或略小於字體大小的元素的底部。

顯然（或者不是這樣，對不起），我正在處理標題等。我不知道這些是否適用於段落或其他多行內容。

來源

2011-02-09 04:54:00 Chris

嗨克里斯，歡迎來到SO！請記住，答案不是帖子，因此我們儘量不要包含salutations，標語或簽名。另外，我建議你閱讀[faq]。 – Roflo 2012-11-30 03:58:04

使用CSS的文本和圖像定位

回答

相關問題