使用css sprites怎么才能使图标与文字垂直居中显示_html/css_WEB-ITnose
在写一个博客界面
本来用不用css sprites都没什么问题 小网站嘛
不过没用过sprites 今天就写了一下
但是之前没使用sprites 直接插入图标图片和文字之后 用height与line-height同样高度就可以垂直居中
用了sprites之后因为插入的是背景 垂直居中就不好控制了
不知道大家有什么好的方法 推荐一下
回复讨论(解决方案)
楼主?的容器垂直居中
还是
background:url(...) center;
这样?
HTML:
Blog Search
CSS:
.iconA {display:inline-block; height:16px; width:16px; background:url(icons.png) -20px -20px no-repeat}
可以让图标和文字显示在同一行 图标不会偏上一点
iconA
加上
vertical-align:middle;
试试
解决了
vertical-align:middle;还是会错位一点
用margin-bottom 给一个负值调整一下就OK了
谢了

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題

本文討論了HTML< Progress>元素,其目的,樣式和與< meter>元素。主要重點是使用< progress>為了完成任務和LT;儀表>對於stati

本文討論了html< datalist>元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

本文討論了HTML< meter>元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了< meter>從< progress>和前

本文討論了視口元標籤,這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互,而濫用可能會導致設計和可訪問性問題。

本文討論了< iframe>將外部內容嵌入網頁,其常見用途,安全風險以及諸如對象標籤和API等替代方案的目的。

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。
