2行4列の表のセルに、同じ画像を中央ぞろえにして貼りたいのですが、一括して貼る方法はないのでしょうか。
一つ一つのセルに同じ事書いていかなければいけないのですか?
また、<div align="center"><tr>~</div>とかやってもうまく中央ぞろえにならないので困り果ててます。宜しくお願いします。
やりかたはいろいろありますが、class という属性を指定することで、スタイルをまとめて指定できます。
<td> に class を指定する方法。
<style> .my_cell { background-image: url(http://www.st-hatena.com/users/a-/a-kuma3/profile_s.gif); background-repeat: no-repeat; padding-left: 2em; width: 20em; text-align: center; /* これが中央ぞろえの指定 */ } </style> <td> に class を指定する <table border="1"> <tr> <td class="my_cell">いち</td> <td class="my_cell">に、の</td> <td class="my_cell">さん</td> <td class="my_cell">し</td> </tr> <tr> <td class="my_cell">ワン</td> <td class="my_cell">トゥー</td> <td class="my_cell">スリー</td> <td class="my_cell">フォー</td> </tr> </table>
それぞれの要素には、class="○○○" という指定を入れて、<style> では、ピリオドを入れて、.○○○ に対して、一括でスタイルの指定ができます。
これでも、うっとおしいなあ、と感じるのであれば、タグの階層を指定して class を指定することもできます。
<style> .my_table tbody tr td { background-image: url(http://www.st-hatena.com/users/a-/a-kuma3/profile_s.gif); background-repeat: no-repeat; padding-left: 2em; width: 20em; text-align: center; /* これが中央ぞろえの指定 */ } </style> <table border="1" class="my_table"> <tr> <td>いち</td> <td>に、の</td> <td>さん</td> <td>し</td> </tr> <tr> <td>ワン</td> <td>トゥー</td> <td>スリー</td> <td>フォー</td> </tr> </table>
ついでに、中央ぞろえの指定も入れてます。
スタイルの指定は、text-align: center; です。
指定できるタグが限られてますが、td には直接指定できます。
jsFiddle という、HTML のお試しができるサイトで、先のコードを試してみたのが、以下のリンクになります。
http://jsfiddle.net/a_kuma3/hPYNx/
textの中央揃えではなくて、画像の中央揃えなので
2012/03/28 01:21:41text-align:center;
ではなく
background-position:center;
だと思うんですが
あ゛、画像が中央ぞろえか orz
2012/03/28 01:47:16