html - 连续 4 张图片，如何在每张图片下居中放置特定文本？

Question

我对 CSS 一无所知。这个问题(How can I align text directly beneath an image?)正是我所需要的。我有 4 张图片，我希望它们并排放置，文字与该图片下的每个特定图片相对应。我从来没有使用过 CSS，所以我在 HTML 中设置了图像，直到那部分使用我发布的问题链接中的说明，并且每个图像的文本都不在该图像下方，但图像没有连续对齐直接穿过，这是我不明白该怎么做。

这是我的代码:

<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:carlcall@centergrovecoc.com">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:sjongentry@centergrovecoc.com">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:johnmabery@centergrovecoc.com">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，所以我迷失了一些东西。

Answer 1

尝试 - DEMO

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