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: centercss で class を設定してみてください.img-with-text。画像をブロックとして表示することもできます。このようなもの：

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