IMG垂直對齊下的文字換行：中間不能正常工作

當使用伴隨文字的圖像上使用垂直對齊時，我得到意想不到的結果。如果文本比容器更廣泛，它包裝這樣的圖像下面，而不是簡單地包裹到下一行：IMG垂直對齊下的文字換行：中間不能正常工作

alt text http://preview.moveable.com/jm/verticalalign.png

我的HTML很簡單：

<ul> 
    <li><img .../> some text </li> 
    ... 
</ul>

我在UL上可能有一個高度overflow-y:scroll（可能不相關）
我對LI的高度設置了足夠大的佔位符圖像加間距。
我vertical-align:middle在圖像上，以獲得正確的地方的文字，幾乎
剩下的只是邊距和邊框
上午我不使用浮動

我怎樣才能獲得文本正確包裝，最好沒有更多的標記？

來源

2010-02-04 Diodeus - James MacFarlane

你說你正在圖像上設置垂直對齊;它只在圖像上，還是在圖像和文本上？ – Pops 2010-02-04 19:37:30

它只在圖像上。 – 2010-02-04 19:57:50

「如何正確包裝文字」定義'正確'。 – graphicdivine 2010-02-04 20:00:54

如果圖像是靜態的我會用在李的背景圖像，然後簡單地添加左填充，以允許正確的間距

li { 
     background: url(/images/foo.jpg) center left no-repeat; 
     padding-left: barpx; 
    }

，你也可以使用保證金上慄允許間距到的圖像的UL

內部左側如果圖像是不同的，我會簡單地一類適用於每個L1來區分的

編輯爲徐friendlyness：

將圖像添加到標記中，然後將其隱藏在樣式表中，這樣用戶只能看到帶有背景圖像的圖像集，Google bots忽略樣式表，因此將在標記中爲圖像提供服務。

li img { 
    display:none 
    }

來源

2010-02-10 13:18:49 Alex

不是很適合搜索引擎優化，但一個好主意。 – 2010-02-10 15:39:22

，以保持它的友好你可以添加圖像內和CSS內聲明李img { display：none; } 這樣用戶只能看到背景圖片，但googlebots獲取實際圖片 – Alex 2010-02-10 16:12:51

正如@graphicdivine指出的那樣，有兩種方法可以正確解釋。如果你想要東西填滿圖像周圍的所有空間，我會按照他的建議去做：在圖像上使用float: left;。作爲前

<li style="display: table-row;"> 
<img src="..." style="vertical-align: middle; display: table-cell;" /> 
<span style="display: table-cell;">...</span> 
</li>

相同免責聲明，雖然：

相反，如果你想有圖片旁邊的文字的垂直塊，你可以應用以下這是IE沒有好。此外，它打破了你的「沒有更多的標記」的規則，但我不知道你想如何實現不同的結果而不做任何改變。也許我沒有正確理解你。

來源

2010-02-04 19:50:58 Pops

如果您浮動圖像，則無法使用垂直對齊。我想我可能只需要使用......一張桌子！（不，不！！跑掉！） – 2010-02-04 20:47:58

對我來說，你可以將圖像浮起來。

來源

2010-02-04 20:02:46 graphicdivine

我也想着這樣做。不過，我覺得OP不想使用浮動。 – Pops 2010-02-04 20:06:02

IMG垂直對齊下的文字換行：中間不能正常工作

回答

相關問題