重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

td要素内のdiv要素をセンタリングしたい

解決済

  • 質問者：fujio5031
  • 質問日時：
  • 回答数：3件

いつもお世話になっております。

HTMLのセンタリングで困っております。
どなたか教えていただけないでしょうか。

HTML
<table>
<tr>
<td>
<div><a href="#"></div>
</td>
</tr>
</table>

上記のdivをtd内でセンタリングさせたいです。

どうかよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： naokita
  • 回答日時：

結果どうしたいのか不明ですが、


＞div要素をセンタリング
aをセンターリングするのではなく、”div要素”をセンタリングですね？
その例だと、
<td style="padding: 0 100px;">
等で簡単で済みそうですが・・・
見た目同じでも、本来のセンターリングの意味にはならないので以下で。

まずは、貴方のHTMLは間違っています。
<div><a href="#"></div>
この↑divの中身は一体何でしょう？　ここの質問だけの例だとしても適切に書きましょう。
<div><a href="#">例</a></div>

#1の方の回答では、divはセンターリングされません。
div内のインライン要素（文章など）はセンターリングになりますが
ブロック要素は、腐ったブラウザを除いてセンターリングされない・・・
divに罫線（枠のborder）を入れると理解できるでしょう。

箱を移動させる？　物を移動させる？　この違いです。どちらかな？

#2の方のは、〆のHTMLが間違かな・・・

divはブロック要素なので、デフォルトでは幅が100％になります。
幅が100％なのだから、右も左もセンターもありません・・・

|｜大大大大大大｜ ← 幅が大きいと移動できない。
|　　　｜小｜　　　　← 幅が小さいと移動できる。
なので、
td内で、divのボックス自体が遊べるように、
tdの幅よりもdivの幅を小さくするのが第一条件です。
次に、
divの左右を margin:auto; にする。
例：
<td style="width:200px;">
<div style="width:100px; margin:auto; border:1px solid red;">
<a href="">例</a>
</div>
</td>

これで、中身のインライン要素が左（デフォルトなら）のままで、
divだけがセンターに配置されます。

外部CSSなら（数値は適当）
td{ width:200px;}
td div{ width:100px; margin:auto;}


因みに、上記ができなければ、
過去モードの可能性があるのでハックなどの別途対応が必要です・・・
<td style="width:200px; text-align:center;">
<div style="width:100px; margin:auto; text-align:left; border:1px solid red;">
<a href="">例</a>
</div>
</td>

あとは応用とか、「CSS センターリング」で検索するとか。
    • good
    • 1
    • 件
通報する
この回答へのお礼

お礼が遅れてすみません。
確かに、ブロック要素とインライン要素の違いでした。
widthを指定してmarginのautoでOKでした。
しょーもない質問ですみません。ご回答ありがとうございました。

通報する
お礼日時：2012/12/26 20:30

No.2

  • 回答者： ORUKA1951
  • 回答日時：

　divは汎用ブロック要素ですから、ブロック要素をそれが含まれるブロック内で中央に配置するときには、自身の巾を指定して左右のマージンをautoにすると中央に配置されます。


td{width:10em;}
td div{width:6em;margin-right:auto;margin-left:auto;}
です。
　行内要素は、text-align:center;で中央寄せするのとは異なります。

★ただし、「単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」は、とても重要な守るべきルールです。
　表は二次元データを並べるためのもので、デザインのために使用すべきではありません。

　また、divは「複数のブロックをグループ化するときや、他に適切な要素がないときに使用する最終手段」です。tableと同様にデザインのためだけに使用するものではありません。--HTML5では、ここはより厳しくなります。
<td>
　<p><a href=""></a></td>
</td>
　で良い場合が多いのでは？
    • good
    • 1
    • 件
通報する
この回答へのお礼

プログラムの要件にて、DIVが必要だったもので。
別の方法で対応致しました。
ご回答ありがとうございました。

通報する
お礼日時：2012/12/26 20:32

No.1

  • 回答者： too_bad
  • 回答日時：

HTML部分



<table>
<tr>
<td class="cen">
<div><a href="#"></div>
</td>
</tr>
</table>

CSS部分(外部CSSの場合)
td.cen {
text-align: center;
}

CSS部分(内部CSSの場合)
<head>

<style type="text/css">
<!--
td.cen {
text-align: center;
}
-->
</style>

</head>

それから、アンカーリンクの前にDIVを挟まなくてもセンタリングはできるかと＾＾；
改行目的のDIVであるのであれば、大人しく

CSS部分(外部CSSの場合)
td.cen {
text-align: center;
padding-top: 16px;
}

CSS部分(内部CSSの場合)
<head>

<style type="text/css">
<!--
td.cen {
text-align: center;
padding-top: 16px;
}
-->
</style>

</head>

などとされたほうがよろしいかと。
    • good
    • 0
    • 件
通報する
この回答へのお礼

プログラムの要件にて、DIVが必要だったもので。
別の方法で対応致しました。
ご回答ありがとうございました。

通報する
お礼日時：2012/12/26 20:31

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報