写真+リンク文字を縦ならびにして中央寄せする

質問

ワードプレスですが、

<a href="A"><img src="http:"A1" alt="A" /></a>
<a href="A">A</a>

<a href="B"><img src="http:"B1" alt="B" /></a>
<a href="B">B</a>

この２つセットを、↓のようなかんじで横に並べて、中央寄せして、間を少し空けたいのです。

　　　　画像A　　　　　画像B
　　リンク文字A　　リンク文字B

tableは使いたくないので、CSSとの組み合わせで、教えていただけましたら、と思います。

よろしくお願いいたします。

回答No.1

ORUKA1951 · ベストアンサー

デザインではなく、文書構造だけを考えてマークアップします。
HTMLはデザインではなく、文書構造をマークアップするだけの言語です。それをどのように表示するかは、ブラウザが持つ、あるいは著者なり、ユーザーが指定するスタイルシートによるものです。
　その意味で、表であれば表(table)でも構わないのですよ。--表でないものをデザインのためにtableを使用するのは間違っているのです。
・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )
・ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )

　例えば、アルバムのように、画像とその説明のリストがあれば次のようにマークアップするでしょう。
<ul>
　<li><a href=""><img src="" width="" height="" alt="画像の説明"></a>
　　<ol>
　　　<li><a href="">画像の説明</a></li>
　　　<li>撮影場所</li>
　　　<li>日時</li>
　</li>
・・・・
　単に
<ul>
　<li><a href=""><img src="" width="" height="" alt="">説明</a></li>
　<li><a href=""><img src="" width="" height="" alt="">説明</a></li>
・・・・・
　かも知れません。

　もちろん、
<table>
　<tbody>
　　<tr>
　　　<th abbr="画像">画像</th>
　　　<td><a href=""><img src="" width="" height="" alt=""></a></td>
　　　<td><a href=""><img src="" width="" height="" alt=""></a></td>
　　　<td><a href=""><img src="" width="" height="" alt=""></a></td>
　　</tr>
　　<tr>
　　　<th abbr="タイトル">タイトル</th>
　　　<td><a href="">画像のタイトル</a></td>
　　　<td><a href="">画像のタイトル</a></td>
　　　<td><a href="">画像のタイトル</a></td>
　　</tr>
　</tbody>
</table>
　のほうが良いかもしれません。
　もちろん
<ul>
　<li><a href="" title="画像の説明"><img src="" width="" height="" alt=""></a></li>
　<li><a href="" title="画像の説明"><img src="" width="" height="" alt=""></a></li>
　<li><a href="" title="画像の説明"><img src="" width="" height="" alt=""></a></li>
</ul>

　このいずれでも、全く同じに
　　　　画像A　　　　　画像B
　　リンク文字A　　リンク文字B
とプレゼンテーションできるのですよ。
★大事なことは、きちんと正しく文書構造をHTMLでマークアップすること
　それさえきちんと出来ていれば、あとは、スタイルシートでどのようにもなるということです。

[サンプル]どのようにマークアップされていても、下記はすべて同じように表示されるはずです。
★タブは、全角スペースに置換してあるので戻すこと!!

<div class="section album">
　<ul id="photoList1">
　　<li><a href="/A"><img src="./images/01.jpg" width="240" height="180" alt="画像の説明1"></a>
　　　<ol>
　　　　<li><a href="A">画像の説明</a></li>
　　　</ol>
　　</li>
　　<li><a href="/B"><img src="./images/02.jpg" width="240" height="180" alt="画像の説明2"></a>
　　　<ol>
　　　　<li><a href="B">画像の説明</a></li>
　　　</ol>
　　</li>
　　<li><a href="/C"><img src="./images/03.jpg" width="240" height="180" alt="画像の説明3"></a>
　　　<ol>
　　　　<li><a href="C">画像の説明</a></li>
　　　</ol>
　　</li>
　</ul>
　<ul id="photoList2">
　　<li><a href="/A"><img src="./images/01.jpg" width="240" height="180" alt="画像の説明">画像の説明1</a></li>
　　<li><a href="/B"><img src="./images/02.jpg" width="240" height="180" alt="画像の説明">画像の説明2</a></li>
　　<li><a href="/C"><img src="./images/03.jpg" width="240" height="180" alt="画像の説明">画像の説明3</a></li>
　</ul>
　<table summary="画像一覧" id="photoTable">
　　<tbody>
　　　<tr>
　　　　<th abbr="画像">画像</th>
　　　　<td><a href="/A"><img src="./images/01.jpg" width="240" height="180" alt="画像の説明1"></a></td>
　　　　<td><a href="/B"><img src="./images/02.jpg" width="240" height="180" alt="画像の説明2"></a></td>
　　　　<td><a href="/C"><img src="./images/03.jpg" width="240" height="180" alt="画像の説明3"></a></td>
　　　</tr>
　　　<tr>
　　　　<th abbr="タイトル">タイトル</th>
　　　　<td><a href="/A">画像の説明1</a></td>
　　　　<td><a href="/B">画像の説明2</a></td>
　　　　<td><a href="/C">画像の説明3</a></td>
　　　</tr>
　　</tbody>
　</table>
　<ul id="photoList3">
　　<li><a href="/A" title="画像の説明1"><img src="./images/01.jpg" width="240" height="180" alt="画像の説明"></a></li>
　　<li><a href="/B" title="画像の説明2"><img src="./images/02.jpg" width="240" height="180" alt="画像の説明"></a></li>
　　<li><a href="/C" title="画像の説明3"><img src="./images/03.jpg" width="240" height="180" alt="画像の説明"></a></li>
　</ul>
</div>

[スタイルシート]
#photoList1,#photoList2,#photoTable,#photoList3{
margin:0 auto;
text-align:center;
line-height:1.4em;
}
div.album ul,div.album ol,div.album li{
list-style-type:none;
margin:0;padding:0;
}
div.album li{display:inline-block;width:250px;padding:5px;}
#photoTable th{display:none;}
#photoTable{border-collapse: separate;border-spacing:20px 0;}
#photoList3 a:after{content:"\A" attr(title);white-space:pre;}

補足

ありがとうございます！
photoList2を使ってできました。

もう一つ教えてくださいますか？

画像の間隔を調整するには、どの数字をいじったらよいのでしょうか？

よろしくお願いいたします。

回答No.2

ORUKA1951

#photoList2{
margin:0 auto;
text-align:center;
line-height:1.4em;
}
div.album ul,div.album ol,div.album li{
list-style-type:none;
margin:0;padding:0;
}
div.album li{
display:inline-block;
width:250px;
padding:5px;/* 250-2*5 = 40にする */
margin:0 5px; /* この値もありかな　前の数字は上下　後の数字は左右 */
}