连续 4 张图片，如何在每张图片下居中特定文本？答案

【问题标题】：4 images in a row, how do I center specific text under each image?连续 4 张图片，如何在每张图片下居中特定文本？
【发布时间】：2013-03-09 15:22:15
【问题描述】：

我对 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，所以我迷失了一些东西。

【问题讨论】：

标签： html css image text center

【解决方案1】：

试试 - DEMO

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

【讨论】：

在哪里放置 .img-with-text 部分？就像我说的，我对 CSS 一无所知。但是，对于大多数事情，如果有人指点我，那么此后每隔一段时间我就可以自己做。我知道 CSS 文件在我们网站后端的 joomla 中的位置，但我不知道要编辑哪一个，等等。我只是怕我把它搞砸了。
@KristinaHammock 如果您的标记中有 .img-with-text 类，这几乎肯定意味着您的 css 文件中某处存在关联的 css 规则。只需查找并编辑那里的内容。

【解决方案2】：

试试这个：

    <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: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>

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

【讨论】：

我应该把 style type= 部分放在哪里？就像我说的，我对 CSS 不了解。 :(
最简单的方法是将其放在 HTML 文档 webdesign.about.com/od/beginningcss/a/where-to-put-css.htm 的 head 标签（部分）中以获取更多信息。但是，如果您想在其他（子）网站上重复使用它，您可能希望将其放在外部。
也许我应该添加 Head 标签将非常接近 HTML 文档的开头。

【解决方案3】：

尝试在您的 css 中为 .img-with-text 类设置 text-align: center，并可能将图像显示为块。像这样的：

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

【讨论】：