將文本直接放置在多個圖像下

對HTML和CSS非常新穎，但閱讀了很多內容並希望有所學習。將文本直接放置在多個圖像下

我有一個5人圖像的水平行，我想將圖像的名稱直接放置在每個圖像下方的中心位置。

這是我寫的HTML：

<div id="members_hz"> 
      <center> 
      <img src ="images/kathy.jpg" height="150px" width="150px" alt="kathy"> 

      <img src ="images/steve.jpg" height="150px" width="150px" alt="steve"> 

      <img src ="images/todd.jpg" height="150px" width="150px" alt="todd"> 

      <img src ="images/don.jpg" height="150px" width="150px" alt="don"> 

      <img src ="images/sean.jpg" height="150px" width="150px" alt="sean"> 
      <p>Kaths</p> 
      <p>Steve</p> 
      <p>Todd</p> 
      <p>Don</p> 
      <p>Sean</p> 
      </center> 
     </div>

這是CSS：

#members_hz { 
    overflow:hidden; 
} 

#members_hz img { 
    position:relative; 
    left:30px; 
    display:inline; 
    margin: 0 15px; 
}

的圖片很好的對齊了整個頁面，但我想不通的CSS使名字排列在每張圖片下方。

謝謝你的幫助！

來源

2013-10-03 user2843365

如果您使用的是HTML5，請查看figure/figcaption http://html5doctor.com/the-figure-figcaption-elements/ – MLeFevre

您還應該知道，「

」元素不再有效在HTML5下......它已被棄用。 –

溝中心，並在圖像使用數字和figcaption文本這裏是代碼。

<div id="members_hz"> 
<figure> 
    <img src ="images/kathy.jpg" height="150px" width="150px" alt="kathy"> 
    <figcaption>Kaths</figcaption> 
</figure> 
<figure> 
    <img src ="images/steve.jpg" height="150px" width="150px" alt="steve"> 
    <figcaption>Steve</figcaption> 
</figure> 
<figure> 
    <img src ="images/todd.jpg" height="150px" width="150px" alt="todd"> 
    <figcaption>Todd</figcaption> 
</figure> 
<figure> 
    <img src ="images/don.jpg" height="150px" width="150px" alt="don"> 
    <figcaption>Don</figcaption> 
</figure> 
<figure> 
    <img src ="images/sean.jpg" height="150px" width="150px" alt="sean"> 
    <figcaption>Sean</figcaption> 
</figure> 
</div>

來源

2013-10-03 15:48:37

感謝您的回覆。我嘗試了您的示例，當文本位於圖片下方時，它會偏移到圖片的左側，圖片現在位於垂直行中，而不是水平橫跨頁面。我認爲CSS屬性顯示：內聯會導致圖像水平排列？ – user2843365

添加到您的CSS：figure {float：left;} – 2013-10-03 16:08:23

看到此[Codepen]示例（http://codepen.io/Paulie-D/pen/7103050654936eab729233325edba0e9） –

我想包在一個div或跨度每個圖像，包括名稱，如下所示

<div id="img1"> 
    <img src ="images/kathy.jpg" height="150px" width="150px" alt="kathy"> 
    <p>Kaths</p> 
</div> 

<div id=img2"> 
    <img src ="images/steve.jpg" height="150px" width="150px" alt="steve"> 
    <p>Steve</p> 
</div>

等...

你可以這樣定位您的div的，而不是你的圖像。

希望這會有所幫助。

來源

2013-10-03 15:45:12 YOOOEE

你的例子是正確的，但是如果沒有可以完成這項工作的現有元素，你應該只使用一個div。圖和figcaption可以做到這一點沒有問題，以及一個無序的列表。 – 2013-10-03 15:51:48

ü也可以試試這個：

<style> 
#test{list-style:none} // you can set heigt width margin padding also. 
#test > li 
{ 
height:120px;width:100px;padding:5px; border:solid 1px #ccc; 
text-align:center;float:left;margin:2px; 
} 
#test >li>img {//your css for image} 
</style> 

<ul id="test"> 
<li ><img src="../images/img1.png"/><br>Name of Image1</li> 
<li><img src="../images/img1.png"/><br>Name of Image1</li> 
<li><img src="../images/img1.png"/><br>Name of Image1</li> 
<li><img src="../images/img1.png"/><br>Name of Image1</li> 
<li><img src="../images/img1.png"/><br>Name of Image1</li> 
<li><img src="../images/img1.png"/><br>Name of Image1</li> 
<li><img src="../images/img1.png"/><br>Name of Image1</li> 
<li><img src="../images/img1.png"/><br>Name of Image1</li> 
</ul>

來源

2013-10-03 15:46:56

你可以做到這一點在HTML4和HTML5使用text-align是這樣的：（使用一個div包裝）

http://jsfiddle.net/2xGZ5/3/

HTML5（用圖

.img-wrapper { 
    text-align:center; 
}

HTML4/figcaption）

http://jsfiddle.net/2xGZ5/2/

來源

2013-10-03 15:49:34 MLeFevre

將文本直接放置在多個圖像下

回答

相關問題