0

ギャラリー内の画像とそのすぐ下の名前を含むテーブルを作成しようとしています。画像を各列の垂直方向の中央に配置し、名前を の下部に配置したいの<td>ですが、うまくいかないようです。これまでの私のコードは次のとおりです。

table.gallery {
    width:100%;
    text-align: center;
    table-layout: fixed;
}
table.gallery td {
    padding: 10px 10px 10px 10px;
    width:33%;
    overflow: hidden;
}
table.gallery td img{
    vertical-align: middle;
}
table.gallery td span.desc {
    vertical-align: bottom;
}

そして、テーブルを表示するための私の PHP コード:

<table border="0" class="gallery"><tr>
<?php
    $curtd = -1;
    foreach ($img_arr as $item) {
        $curtd++;
        if ($curtd >= 3){
            echo '</tr><tr>';
            $curtd = 0;
        }
        echo '<td><center><a href="'.$item['link'].'" target="_blank"><img src="'.$item['thumb'].'" /></a></center>
                <span class="desc"><a href="'.$item['link'].'" target="_blank">'.$item['title'].'</a></span></td>';
    }
?>
</tr></table>

私の画像は問題なく垂直方向に中央に表示されますが、名前はセルの下部ではなく、画像のすぐ下に表示されます。どうすればこれを修正できますか?

編集: Php コードによって生成された HTML は次のとおりです (スペースを節約するために URL などを削除しています)。

<table border="0" class="gallery"><tr>
<td>
    <center><a href="[link]" target="_blank"><img src="[URL]" /></a></center>
    <span class="desc"><a href="[link]" target="_blank">[name]</a></span>
</td>
<td>
    <center><a href="[link]" target="_blank"><img src="[URL]" /></a></center>
    <span class="desc"><a href="[link]" target="_blank">[name]</a></span>
</td>
<td>
    <center><a href="[link]" target="_blank"><img src="[URL]" /></a></center>
    <span class="desc"><a href="[link]" target="_blank">[name]</a></span>
</td>
</tr><tr>
<td>
    <center><a href="[link]" target="_blank"><img src="[URL]" /></a></center>
    <span class="desc"><a href="[link]" target="_blank">[name]</a></span>
</td>
<td>
    <center><a href="[link]" target="_blank"><img src="[URL]" /></a></center>
    <span class="desc"><a href="[link]" target="_blank">[name]</a></span>
</td>
<td>
    <center><a href="[link]" target="_blank"><img src="[URL]" /></a></center>
    <span class="desc"><a href="[link]" target="_blank">[name]</a></span>
</td>
</tr></table>
4

1 に答える 1

0

これを試してください：

2 つの tr タグを使用し、first - image - 、 next - name - で

于 2012-10-05T19:33:42.270 に答える