如何獲取文本顯示<IMG>標籤

下面讓我們假設你有下面的HTML：如何獲取文本顯示<IMG>標籤

<html> 
<div style="text-align: center;"> 
    <img src="http://www.ps.uci.edu/~tomba/ants/sugar.jpg" width="50" height="37" /> 
    This is some centered text blah blah blah and blah 
</div> 
</html>

現在，你想要的文字到圖像的顯示下，而不是它的右側。讓我們說一些奇怪的原因，你不能改變HTML，只有CSS文件。你可以做的一件事是將「display：block」樣式添加到<img>標籤，但是如果你這樣做，圖片將不再以你需要的div爲中心。

如果我可以修改HTML，我可以在圖片後面放一個<br />（儘管有人說如果你使用太多的br標籤，一個迅猛龍會吃掉你）。

任何想法？

來源

2011-03-04 Mike Christensen

爲什麼不使用margin-top修改位置？ – JohnP 2011-03-04 06:47:22

不能將HTMl標籤內的文字包裝起來嗎？比如說'div'或者'p'標籤？ – 2011-03-04 06:47:35

編輯過這個問題嗎？當我回答時，我清楚地記得沒有提及「display：block」......呃，我刪除了我原來的答案。 :) – FarligOpptreden 2011-03-04 06:50:59

你可以使圖像顯示塊和邊距：0自動;

img {display:block;margin:0 auto;}

來源

2011-03-04 06:50:03 Shad

這是一個非常好的答案！ – FarligOpptreden 2011-03-04 06:53:41

不錯！這看起來可以解決所有問題，而不用擔心懸而未決的肉食動物疫情。 – 2011-03-04 06:56:13

我實際上不知道爲什麼這會起作用。這實際上是按照CSS規範而不是隨機的瀏覽器行爲，對吧？ – 2011-03-04 06:59:15

如何獲取文本顯示<IMG>標籤

回答

相關問題