導航欄中的CSS圖像按文字

我正試圖在導航欄上將圖像與CSS對齊。即使我調整圖像大小，它仍然會將文本壓低。導航欄中的CSS圖像按文字

我的div HTML代碼：

<div id="menu"> 
    <ul> 
     <li><a href="#"><img src='images/tphome.png' border='0' width='24' height='24'> Home</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div>

http://jsfiddle.net/nuSLH/

有沒有去解決這個？

來源

2013-03-06 Abby E

你的形象缺乏強制性'alt'屬性。請參閱「[WCAG 2.0技術]（http://www.w3.org/TR/WCAG20-TECHS/H67.html）」之一，並在WebAIM上進行了非常不錯的閱讀：[創建可訪問的圖像 - 創建有效的替代方案（ alt）Text]（http://webaim.org/techniques/images/alt_text） – FelipeAls 2013-03-06 04:42:13

如果你確實使用'alt'屬性，在這種情況下，我會把它留空。由於最合乎邏輯的替代文本將是「Home」，屏幕閱讀器在瀏覽菜單時會閱讀「Home Home」，而且這一定很煩人。編輯：我不會在這裏使用'img'來開始。演示圖形屬於CSS。 – powerbuoy 2013-03-06 22:48:18

我建議使用CSS類和：之前，而不是放置在圖像，因爲它是演示文稿，而不是真正重要的內容。

改變了這種添加位置：相對...

#menu li { 
float: left; 
    position: relative; 
}

然後像這樣...可能需要一些填充添加到華里。

.icon-home:before { 
position: absolute; 
top: 0px; 
left: 0px; 
content: ""; 
background: url(http://i.imgur.com/1CRy2G5.png); 
width: 24px; 
height: 24px; 
}

要添加的類別...

<li><a class="icon-home" href="#">Home</a></li>

來源

2013-03-06 04:23:09

你可能會想稍微調整一下，但它給了你一般的想法。 – 2013-03-06 04:24:01

我將如何添加圖像的CSS類？ – 2013-03-06 04:28:38

編輯我的帖子。 – 2013-03-06 04:31:40

添加一些CSS的圖像可以強制文本對齊到圖像的頂部：

#menu img { vertical-align: top;}

或中間：

#menu img {vertical-align: middle;}

另一種選擇是使用背景圖片對a標籤加上一點點填充：

#menu a { 
    background: url('http://i.imgur.com/1CRy2G5.png') no-repeat left center; 
    padding-left: 30px; padding-top: 5px; 
}

來源

2013-03-06 04:18:41 Brett

改變你的HTML下面

<div id="menu"> 
      <ul> 
       <li><a class="home" href="#">Home</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div>

，並在你的CSS添加此

#menu a.home { 
    padding: 4px 20px 9px 30px; 
    background-image: url(http://i.imgur.com/1CRy2G5.png); 
    background-repeat:no-repeat; 
}

demo

來源

2013-03-06 04:33:55 jhunlio

由於未找到請求的img，img標籤的大小變大。我的建議是，怎麼樣刪除IMG 如果沒有找到所需的IMG

可以使用onerror="this.remove()"

這裏是小提琴http://jsfiddle.net/nuSLH/14/

來源

2013-03-06 04:34:56 nvl

導航欄中的CSS圖像按文字

回答

相關問題