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;
}

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

Answer 3

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

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

连续4张图片，如何将每张图片下的特定文字居中？

3 个答案: