如何在HTML和CSS中水平對齊的圖像下添加文本

我是一個新手。我終於想出瞭如何讓我的index.html中的主頁上的圖像與我的default.css中的代碼一致。如何在HTML和CSS中水平對齊的圖像下添加文本

現在我想在每張圖片下添加文字。我知道這應該很容易，但我無法找到任何似乎有用的東西。

這是我的HTML代碼：

<div id="random"> 
    <img src="1.jpg" /> 
    <img src="2.jpg" /> 
    <img src="3.jpg" /> 
</div>

這裏是我的CSS代碼：

#random{ 
    max-width: 650px 
} 

#random img{ 
    display:inline-block; 
    width:80px; 
}

來源

2013-10-25 Stephanie

嘗試：

#random{ 
    max-width: 650px 
} 

#random .image-wrap{ 
    display:inline-block; 
    width:80px; 
} 


<div id="random"> 
    <div class="image-wrap"> 
     <img src="1.jpg" /> 
     <p>Text for image 1</p> 
    </div> 
    <div class="image-wrap"> 
     <img src="2.jpg" /> 
     <p>Text for image 2</p> 
    </div> 
    <div class="image-wrap"> 
     <img src="2.jpg" /> 
     <p>Text for image 2</p> 
    </div> 
</div>

來源

2013-10-25 19:46:10 keeg

裹在一個容器中的圖像，並把文字在他們下面。事情是這樣的：

http://jsfiddle.net/8xf2N/1/

<div id="random"> 
    <div class='img-container'> 
     <img src="1.jpg" /> 
     <p>Image One</p> 
    </div> 
    <div class='img-container'> 
     <img src="2.jpg" /> 
     <p>Image Two</p> 
    </div> 
    <div class='img-container'> 
     <img src="3.jpg" /> 
     <p> Image Three</p> 
    </div> 
</div>

CSS：

#random{ 
    max-width: 650px 
} 

#random img{ 
    width:80px; 
} 

.img-container{ 
    display: inline-block; 
}

來源

2013-10-25 19:50:03 nzifnab

你應該換行圖像一個div。這裏是一個小提琴http://jsfiddle.net/a6pNw/

CSS：

#random{ 
max-width: 650px 
} 

#random div{ 
display:inline-block; 
width:80px; 
text-align:center; 
}

HTML：

<div id="random"> 
<div> 
    <img src="http://placehold.it/80x80" /> 
    <p>Some text</p> 
</div> 
<div> 
    <img src="http://placehold.it/80x80" /> 
    <p>Some text</p> 
</div> 
<div> 
    <img src="http://placehold.it/80x80" /> 
    <p>Some text</p> 
</div>

來源

2013-10-25 19:51:11 j0hnstew

您可以隨時使用HTML 5數字標籤。（假設您的網站遵循HTML 5標準）。這樣，您可以嵌套標籤並對其進行設計。

<div id="random> 
    <figure> 
     <img src="1.jpg"/> 
     <figcaption>Your Caption</figcaption> 
    </figure> 
</div>

這樣你就可以用CSS來選擇它們了。

來源

2013-10-25 19:51:43

如何在HTML和CSS中水平對齊的圖像下添加文本

回答

相關問題