HTML.CSSを習得したいと思っている50のおやじです。

2行4列の表のセルに、同じ画像を中央ぞろえにして貼りたいのですが、一括して貼る方法はないのでしょうか。
一つ一つのセルに同じ事書いていかなければいけないのですか?
また、<div align="center"><tr>~</div>とかやってもうまく中央ぞろえにならないので困り果ててます。宜しくお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2012/03/28 06:43:28

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

やりかたはいろいろありますが、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>
&lt;td&gt; に 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/

id:fut573

textの中央揃えではなくて、画像の中央揃えなので
text-align:center;
ではなく
background-position:center;
だと思うんですが

2012/03/28 01:21:41
id:a-kuma3

あ゛、画像が中央ぞろえか orz

2012/03/28 01:47:16
  • id:akiuma2011
    a-kuma3さん、迅速な回答ほんとに心から感謝いたします。コーディングまでしていただき感激です。まさしくズバリ知りたかった事が聞けて喜び一入です。「タグの階層を指定して class を指定」という事ができるのですね。初心者の私にとって目からうろこのTipsでした。本当にありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません