如何處理圖標(biāo)文字的混排?_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
對(duì)于小圖標(biāo)和文字的混合排版的確是個(gè)很麻煩的問題,網(wǎng)上有人總結(jié)了以下幾種解決方法,僅供大家參考:
1、可以把小圖標(biāo)設(shè)為背景, 比較常見于<ul><li>制作的菜單中;(注重:可能你經(jīng)常會(huì)看到在IE5下定義在LI中的小圖片會(huì)在文字下面,原因就是制作者把樣式定義在A中了,IE5對(duì)內(nèi)聯(lián)元素補(bǔ)白樣式支持不完善,所以在一般情況下把背景小圖標(biāo)定義在LI中,因?yàn)長(zhǎng)I在默認(rèn)的情況下是有塊元素的特性。)
2、可以對(duì)圖標(biāo)進(jìn)行樣式定義,設(shè)定img屬性margin或padding的值;
3、可以在圖片中使用align="absmiddle"來讓圖片絕對(duì)居中,alibaba英文網(wǎng)站上很多都是這樣排版的。
4、使用垂直居中的通用方法(外層設(shè)置相對(duì)位置屬性,內(nèi)層設(shè)置絕對(duì)位置屬性,設(shè)置"top:50%;marign-top:-x/2;",x為內(nèi)層的高度)。
哪種方法是最好的?我認(rèn)為應(yīng)該具體情況具體分析,環(huán)境不同方法不同,大家應(yīng)該靈活運(yùn)用。
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- 左中右3欄布局中最先顯示中欄內(nèi)容的方法
- DIV CSS的XHTML代碼結(jié)構(gòu)淺談-不要真DIV CSS了
- absolute與relative如何區(qū)分怎么用?
- WEB2.0標(biāo)準(zhǔn)教程:第十天自適應(yīng)高度
- 參考:div css命名規(guī)范
- IE中奇怪的左右border斷線現(xiàn)象
- WEB2.0標(biāo)準(zhǔn)教程:第九天第一個(gè)CSS布局實(shí)例
- 學(xué)習(xí)Web標(biāo)準(zhǔn)不要對(duì)IE抱有偏見
- divcss表單布局技巧及CSSForm表單設(shè)計(jì)技巧
- Div css菜單:一張圖片實(shí)現(xiàn)翻轉(zhuǎn)效果!
猜你也喜歡看這些
- 利用CSS同比例縮小圖片并且符合Web標(biāo)準(zhǔn)
- CSS布局教程:如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示?
- Div CSS實(shí)例:如何用CSS實(shí)現(xiàn)背景半透明效果
- DIVCSS實(shí)例:橙藍(lán)互換的CSS翻頁效果
- CSS菜單實(shí)例:按鈕效果跳躍的藍(lán)色精靈
- DIVCSS布局教程:應(yīng)用ul、li實(shí)現(xiàn)表格形式
- DIVCSS實(shí)例:一款不錯(cuò)的CSS翻頁效果(DIGG)
- CSS實(shí)例:如何讓無空格的長(zhǎng)字符在IE和FF下面實(shí)現(xiàn)自動(dòng)換行?
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- css背景漸變的技巧與方法
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-如何處理圖標(biāo)文字的混排?
。