如何處理小圖標(biāo)與文字混排的多種解決方案

2024-07-11 08:50:23

字體：大中小

供稿：網(wǎng)友

對(duì)于小圖標(biāo)和文字的混合排版的確是個(gè)很麻煩的問題，網(wǎng)上有人總結(jié)了以下幾種解決方法，僅供大家參考：

1、可以把小圖標(biāo)設(shè)為背景，并設(shè)定<li>的padding值。比較常見于<ul><li>制作的菜單中；（注重：可能你經(jīng)常會(huì)看到在IE5下定義在LI中的小圖片會(huì)在文字下面，原因就是制作者把樣式定義在A中了，IE5對(duì)內(nèi)聯(lián)元素補(bǔ)白樣式支持不完善，所以在一般情況下把背景小圖標(biāo)定義在LI中，因?yàn)長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)用。

上一篇：常用的新聞列表代碼(ul/li布局方式)

下一篇：css實(shí)現(xiàn)不再讓內(nèi)容把td撐開的常用解決方法