連續4張圖片，如何在每張圖片下居中特定文字？

我真的不知道任何有關CSS的知識。這個問題（How can I align text directly beneath an image?）幾乎就是我所需要的。我有4張圖片，我想將它們並排放置，並在圖片下面與每個特定圖片進行對應。我從來沒有使用過CSS，所以我得到了用HTML設置的圖像，直到使用我發佈的問題鏈接中的指示，並且每個圖像的文本都不在該圖像中，但圖像未連續對齊直行，這是我不明白該怎麼做。連續4張圖片，如何在每張圖片下居中特定文字？

這裏是我的編碼：

<div class="container"> 
    <div class="img-with-text"> 
     <img src="images/CarlCall.png" border="0" alt="Carl Call" width="177" height="229" style="border: 2px solid black;" /> 
     <p>Carl Call<br />(931)268-2040<br /><a href="mailto:[email protected]">Email Carl Call</a>  </p> 
    </div> 
    <div class="img-with-text"> 
     <img src="images/sg.png" border="0" alt="Sjon Gentry" width="177" height="229" style="border: 2px solid black;" /> 
     <p>Sjon Gentry<br />(931)268-3273<br /><a href="mailto:[email protected]">Email Sjon Gentry</a></p> 
    </div> 
    <div class="img-with-text"> 
     <img src="images/jm.png" border="0" alt="John Mabery" width="177" height="229" style="border: 2px solid black;" /> 
     <p>John Mabery<br />(931)268-0651<br /><a href="mailto:[email protected]">Email John Mabery</a> </p> 
    </div> 
    <div class="img-with-text"> 
     <img src="images/tr.png" border="0" alt="Ted Ragland" width="177" height="229" style="border: 2px solid black;" /> 
     <p>Ted Ragland<br />(931)268-9387</p> 
    </div> 
</div> 
<p> </p>

任何幫助將不勝感激！我們教會的這個網站剛剛被我拋棄了，但我還沒有學過CSS，所以我迷失在某些事情上。

來源

2013-03-20 Kristina Hammock

嘗試 - DEMO

.img-with-text { 
    float: left; 
    margin-right: 1em; 
    text-align: center; 
}

來源

2013-03-20 13:43:46

我在哪裏放置.IMG，用文本一部分？就像我說的，我對CSS一無所知。然而，對於大多數情況，如果有人指出我的話，那麼在此之後我不會每隔一段時間自己做一次。我知道CSS文件在我們網站後端的joomla中的位置，但我不知道要編輯哪一個，等等。我只是害怕我會搞砸了。 –

@KristinaHammock如果在你的標記中有一個'.img-with-text'類，幾乎肯定意味着你的css文件中有一個關聯的css規則。只要找到它並編輯那裏。 –

嘗試在你的CSS .img-with-text類設置text-align: center，也許顯示圖像爲塊。事情是這樣的：

.img-with-text { float: left; text-align: center; } 
.img-with-text img { display: block; }

來源

2013-03-20 13:44:01 Uby

試試這個：

<style type="text/css"> 
    .img-with-text { float: left; text-align: center} 
    </style> 

<!-- Your code --> 
    <div class="container"> 
    <div class="img-with-text"><img src="images/CarlCall.png" border="0" alt="Carl Call" width="177" height="229" style="border: 2px solid black;" /> 
    <p>Carl Call<br />(931)268-2040<br /><a href="mailto:[email protected]m">Email Carl Call</a> </p> 
    </div> 
    <div class="img-with-text"><img src="images/sg.png" border="0" alt="Sjon Gentry" width="177" height="229" style="border: 2px solid black;" /> 
    <p>Sjon Gentry<br />(931)268-3273<br /><a href="mailto:[email protected]">Email Sjon Gentry</a></p> 
    </div> 
    <div class="img-with-text"><img src="images/jm.png" border="0" alt="John Mabery" width="177" height="229" style="border: 2px solid black;" /> 
    <p>John Mabery<br />(931)268-0651<br /><a href="mailto:[email protected]">Email John Mabery</a> </p> 
    </div> 
    <div class="img-with-text"><img src="images/tr.png" border="0" alt="Ted Ragland" width="177" height="229" style="border: 2px solid black;" /> 
    <p>Ted Ragland<br />(931)268-9387</p> 
    </div> 
    </div> 

<!-- End of your code --> 
    <p style="clear: both">Something more here </p>

來源

2013-03-20 13:51:12

我在哪裏可以將樣式類型= 部分放在？就像我說的，我不瞭解CSS。 :( –

最簡單的方法是將其放置在HTML文檔的頭部標籤（部分）中http://webdesign.about.com/od/beginningcss/a/where-to-put-css.htm以獲取更多信息。但是，如果您想在其他（子）網站上重複使用它，您可能需要將其放在外部。 –

也許我應該補充一點，Head標籤將非常接近HTML文檔的開頭。 –

連續4張圖片，如何在每張圖片下居中特定文字？

回答

相關問題