- ベストアンサー
td要素内のdiv要素をセンタリングしたい
いつもお世話になっております。 HTMLのセンタリングで困っております。 どなたか教えていただけないでしょうか。 HTML <table> <tr> <td> <div><a href="#"></div> </td> </tr> </table> 上記のdivをtd内でセンタリングさせたいです。 どうかよろしくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
結果どうしたいのか不明ですが、 ＞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 センターリング」で検索するとか。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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-html401j/struct/tables.html#h-11.1 )」は、とても重要な守るべきルールです。 表は二次元データを並べるためのもので、デザインのために使用すべきではありません。 また、divは「複数のブロックをグループ化するときや、他に適切な要素がないときに使用する最終手段」です。tableと同様にデザインのためだけに使用するものではありません。--HTML5では、ここはより厳しくなります。 <td> <p><a href=""></a></td> </td> で良い場合が多いのでは？
お礼
プログラムの要件にて、DIVが必要だったもので。 別の方法で対応致しました。 ご回答ありがとうございました。
- too_bad
- ベストアンサー率53% (70/130)
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> などとされたほうがよろしいかと。
お礼
プログラムの要件にて、DIVが必要だったもので。 別の方法で対応致しました。 ご回答ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
お礼が遅れてすみません。 確かに、ブロック要素とインライン要素の違いでした。 widthを指定してmarginのautoでOKでした。 しょーもない質問ですみません。ご回答ありがとうございました。