下面img標籤

這裏HTML中心的文字是我 -下面img標籤

<a href="/mi/"> 
    <img id="i1" name="First" src="1.JPEG" onClick="return goto(this);"></img> 
    First Image 
</a>

我使用這段代碼在我的模板循環顯示喜歡時尚的網格（畫廊）一堆圖像。我想在所有圖像下方顯示一行標題。

我想在img標籤的正下方顯示「First Image」文本（鏈接）。我認爲，因爲我有<a>作爲父容器，文本應該放在<img>以下，但這不會發生。

如何在我的圖像下方顯示居中的文字？

來源

2012-09-23 Srikar Appalaraju

這應該這樣做：

<html> 
    <head> 
     <style> 
      .imageLink{ 
       text-align:center; 
      } 
      .imageLink img{ 
       display:block; 
      } 
     </style> 
    </head> 
    <body> 
     <a href="/mi/" class="imageLink"> 
      <img id="i1" name="First" src="1.JPEG" onClick="return goto(this);" /> 
      First Image 
     </a> 
    </body> 
</html>

希望它能幫助。

來源

2012-09-23 07:22:24 mbinette

text-align:center;和display:block;將做到這一點

檢查這個fiddle

來源

2012-09-23 07:22:09

使您的錨點成爲一個塊並在其中居中放置文本，然後使圖像成爲塊，以便在文本上方導致換行。

a { text-align: center; display: block; } 
img { display: block; }

而且，你不需要關閉圖像標籤，使用<img .. />

來源

2012-09-23 07:22:54 chovy

-1

你可以用

<p>First Image </p>

標籤自動換行，這將做的伎倆;）

<a href="/mi/"> 
<img id="i1" name="First" src="1.JPEG" onClick="return goto(this);"></img> 
<p>First Image </p> 
</a>

來源

2012-09-23 07:32:29

您不應該在內聯元素（'a'）中使用塊元素（'p'）。 –

回答

相關問題