2

これが私が持っているものです-

<a href="/mi/">
    <img id="i1" name="First" src="1.JPEG" onClick="return goto(this);"></img> 
    First Image 
</a>

このコードをテンプレートのループで使用して、ファッションのようにグリッド（ギャラリー）に一連の画像を表示しています。すべての画像のすぐ下に1行のキャプションを表示したいと思います。

imgタグのすぐ下に「FirstImage」のテキスト（リンク）を表示したい。<a>親コンテナとしてテキストを下に配置する必要があると思ったのです<img>が、これは発生していません。

画像の真下の中央にテキストを表示するにはどうすればよいですか？

4

4 に答える 4

7

これは行う必要があります：

<html>
    <head>
        <style>
            .imageLink{
                text-align:center;
            }
            .imageLink img{
                display:block;
            }
        </style>
    </head>
    <body>
        <a href="/mi/" class="imageLink">
            <img id="i1" name="First" src="1.JPEG" onClick="return goto(this);" /> 
            First Image 
        </a>
    </body>
</html>

それが役に立てば幸い。

于 2012-09-23T07:22:24.457 に答える
2

text-align:center;そしてdisplay:block; これを行います

このフィドルをチェックしてください

于 2012-09-23T07:22:09.607 に答える
2

アンカーをブロックにし、その中のテキストを中央に配置してから、画像をブロックにして、テキストの上に改行が入るようにします。

a { text-align: center; display: block; }
img { display: block; }

また、終了画像タグは必要ありません。<img .. />

于 2012-09-23T07:22:54.177 に答える
-1

テキストを次のように折り返すことができます

<p>First Image </p>

タグとこれはトリックを行います;）

<a href="/mi/">
<img id="i1" name="First" src="1.JPEG" onClick="return goto(this);"></img> 
<p>First Image </p>
</a>
于 2012-09-23T07:32:29.710 に答える