人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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



●質問者: akiuma2011
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

やりかたはいろいろありますが、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/


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

a-kuma3さんのコメント
あ゙、画像が中央ぞろえか orz
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ