0

我对CSS一无所知。这个问题（如何直接在图像下方对齐文本？）几乎正是我所需要的。我有 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，所以我迷失了一些东西。

4

3 回答 3

1

尝试这个：

    <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>
于 2013-03-20T13:51:12.427 回答
1

试试 -演示

.img-with-text {
    float: left;
    margin-right: 1em;
    text-align: center;
}
于 2013-03-20T13:43:46.837 回答
0

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

.img-with-text { float: left; text-align: center; }
.img-with-text img { display: block; }
于 2013-03-20T13:44:01.523 回答