• ベストアンサー

CSSによるセンターよせについて

<div> 　<p> 　　真ん中に寄せたいコンテンツ 　</p> </div> のように</p>部分を<div>の真ん中に寄せたい場合、 div { 　width:400px; } div p{ 　margin-left:auto; margin-right:auto; } で実現できるとおもうのですがこれだとmargin: autoの利かない IE6では真ん中によりません。 そこで、IE6用に div { 　width:400px; 　text-algin: center; } div p{ 　margin-left:auto; margin-right:auto; } と　text-algin:center　を施すわけですが 複数のブラウザに対応させようとおもったら、 常にtext-alginとmarginで２パターンのセンター寄せの 記述をしないといけないのでしょうか。 もしくは、 <table algin='center'><tr><td> 　<p> 　　真ん中に寄せたいコンテンツ 　</p> </td></tr></table> のようにテーブルを使わないといけないのでしょうか。 もっとシンプルにいろんなブラウザに対応したセンター寄せ方法があれば アドバイスお願いします。

  • HTML
  • 回答数4
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • os6v100i
  • ベストアンサー率44% (16/36)
回答No.2

IE6でmarginのautoがきかないとのことですが、DOCTYPEは正しく設定されていますか？ 正しく設定されていないと互換モードになりmarginのautoがきかないようです。 また、提示された内容では<p>要素にwidthが設定されていませんが、これだと親要素とwidthが同じになるため、marginが結果的に0になると思われます。 <p>要素の幅が固定できない場合、text-alignを使うのが確実かもしれませんね。 また、ボックス要素をmarginでセンター寄せしても、ボックス要素の中身はセンター寄せされませんのでご注意を。 今回の場合、<p>要素の中身もセンター寄せにしたければ<p>要素にtext-alignを指定してやる必要があります。

yuzuru0024
質問者

お礼

回答ありがとうございます。 DOCTYPEスイッチで、CSSの解釈が相当変わるのですね。 現在編集しているファイルのDOCTYPEスイッチは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> で、ＩＥは、互換モードでした。 ＞ボックス要素をmarginでセンター寄せしても、 ＞ボックス要素の中身はセンター寄せされませんので 箱は真ん中に来るけど、その中に書かれている文字や、 要素は真ん中にこないということですね。 ということは、ボックスを真ん中に来さすための margin: auto;と ボックスの中に書かれている文字等を真ん中に来さすための text-align: center;の ２つが結局必要となるわけですね。 しかも、互換モードＩＥとなるとさらに、真ん中にしたいボックスの 外箱にtext-align: center;が必要になり・・・ ・・・ややこしいですね。

その他の回答 (3)

  • os6v100i
  • ベストアンサー率44% (16/36)
回答No.4

No.2です。 DOCTYPEを <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml4/DTD/loose.dtd"> とすることでIE6でも標準モードになります。 これで外側のDIVにtext-alignは必要なくなります。 結局のところ、どういう構造で、どういう見た目にしたいのかでアプローチは変わると思います。 外側の<div>内のコンテンツ全てをセンターによせたいのであれば、親要素である<div>にtext-alignを指定すればいいですし、 いくつかの要素があり、それぞれに異なる設定が必要なら、それにあわせて記述すればいいかと。

yuzuru0024
質問者

お礼

回答ありがとうございます。 継承をうまく利用していくということですね。 個別に指定するにしても、デフォルトとして text-alignをセンターなり、左寄せなりしといてもいい訳ですし・・・。

noname#83877
noname#83877
回答No.3

div { text-align:center; } div p { display:inline-block !important; display:-moz-inline-box !important; display:inline; } 記述的な長さはあまり代わらないので独自拡張を使わないtext-alginとの併用の方がおすすめです。 その他inline-boxを使うメリットとしては、margin:0 auto;を指定した要素にはwidthの指定も必要になるのですがこの方法では内容によって自動的にボックスを拡張してくれる点です。

yuzuru0024
質問者

お礼

回答ありがとうございます。 ＞text-alginとの併用の方がおすすめ ということは、やはりtext-alginとmarginの ２パターン記述するしかないのですね・・・。 inlineは単純に<p>を<span>とかにしてもよさそうですね。

  • nori_007
  • ベストアンサー率35% (369/1048)
回答No.1

以下の通りにしたらどうでしょうか。 div { 　width:400px; 　text-algin: center; 　margin-left:auto; 　margin-right:auto; } div p{ 　text-algin: left; }

yuzuru0024
質問者

お礼

回答ありがとうございます。 これでは、外枠のdivも真ん中になってしまいませんか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • css

    <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="a.gif" width="100" height="100" border="0" /></td> <td > <div class="ab">left</div> <p>説明文 </p> </td> </tr> </table> </td> <td width="20"></td> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="b.gif" width="100" height="100" border="0" /></td> <td> <div class="ab">right</div> <p>説明文 説明文 </p> </td> </tr> </table> </td> </tr> </table> .ab { border-bottom:1px solid #E3E3E3; padding-left:5px; margin: 0px 0px 10px 0px; テーブル内の文字数が変わると片方が上から下に下がってきます。両方上に揃えるには どうすればいいんでしょうか。よろしくお願いします。

    • ベストアンサー
    • CSS
  • cssで表を中央寄せにできません。

    ｃｓｓでテーブルを中央に表示させたいのですが、うまくいきません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> <!-- table{ margin-left: auto; margin- right: auto ; background-image: url(2-3/1024sita.png); background-position: center; background-repeat:repeat-y; background-position: 50% 20%; } </style> </head> <body> <table border="0" width="1024"> <tr> <td><img src="2-3/1024by730.png" width="1024" height="730" border="0"></td> </tr> </table> </body> </html> どうしてですか？

  • 可変長要素を中は左寄せのまま中央寄せ

    widthが可変長の要素があって、その中は左寄せのまま、中央寄せにしたいです。 次のようにテーブルを使えばできたのですが、 テーブルを使わずにやることはできますか？ 　　　　<style> 　　　　　　　　.outer{ 　　　　　　　　　　　　width:500px; 　　　　　　　　　　　　margin:0 auto; 　　　　　　　　　　　　background:#eee; 　　　　　　　　　　　　text-align:center; 　　　　　　　　} 　　　　　　　　.inner{ 　　　　　　　　　　　　background:yellow; 　　　　　　　　　　　　margin:0 auto; 　　　　　　　　　　　　text-align:left; 　　　　　　　　} 　　　　</style> 　　　　<div class='outer'> 　　　　　　　　<table class='inner'> 　　　　　　　　　　　　<tr> 　　　　　　　　　　　　　　　　<td>可変長の文字列・・・・・・・・・・</td> 　　　　　　　　　　　　</tr> 　　　　　　　　　　　　<tr> 　　　　　　　　　　　　　　　　<td style='padding:20px 0;'>aaa</td> 　　　　　　　　　　　　</tr> 　　　　　　　　　　　　<tr> 　　　　　　　　　　　　　　　　<td>bbbbbbbbbbbbbb</td> 　　　　　　　　　　　　</tr> 　　　　　　　　</table> 　　　　</div> display:inline-blockを使っても中央寄せにはなりますが、 「行間」の設定が困難でこれではだめでした。 （１行だけならline-heightで設定できるが、複数行になったとき意図したものではなくなる） 　　　　<div class='outer' > 　　　　　　　　<span class='inner' style='display:inline-block'> 　　　　　　　　　　　　<span>可変長の文字列・・・・・・・・・・・・・・</span><br> 　　　　　　　　　　　　<span>「行間」の設定はできないのでだめ</span> 　　　　　　　　</span> 　　　　</div> 宜しくお願いします。

    • ベストアンサー
    • CSS
  • cssでテーブルの位置を設定するには？

    <table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。

    • 締切済み
    • CSS
  • IEで中央寄せにしたい

    <html> <head> <title>test</title> <style type="text/css"> <!-- body {margin-right : auto; margin-left : auto; width : 50%} div#center { text-align: center; } --> </style> </head> <body> <DIV style=background:red;> test</DIV> </body> </html> これでスレイプニルだとちゃんと中央寄せになるのですが ＩＥ９だと横画面いっぱいに広がってしまいます。 ＩＥでも指定した幅で表示させる方法はありますか？

    • ベストアンサー
    • HTML
  • CSSの設定方法について

    CSSは外部ファイルにし、十数枚あるHTMLに「div id=contents内にあるTableは全て共通のレイアウト」 となるよう下記のCSSを設定しました。 --------CSS----------------------------------------- #contents{margin-left: 70px;} #contents table{width: 650px; border: solid 1px #B1B2B2; border-collapse: collapse; margin: 15px 0px;} #contents tr, td ,th{padding: 4px; border: solid 1px #B1B2B2; border-collapse: collapse;} --------HTML----------------------------------------- <div id="contents"> 　<table> 　　<tr> 　　　<th>項目</th> 　　</tr> 　　<tr> 　　　<td>項目1</td> 　　</tr> 　</table> </div> ------------------------------------------------------- しかし、どうしても違うレイアウトにしたいTableが出てきた為、下記CSSを追加、 HTMLは<div id="contents">の部分を<div id="login">に変更したのですが 追加CSSが反映されず、id=contentsの設定が残ったままになってしまいます。 色々いじってみたのですが、どこが間違っているのやら皆目見当がつきません。 --------追加CSS----------------------------------------- #login{text-align: center; } #login table{width: 450px; border: solid 2px #666666; border-collapse: collapse;} #login tr, td ,th{border: solid 1px #666666; border-collapse: collapse;} --------HTML----------------------------------------- <div id="login"> 　<table> 　　<tr> 　　　<th>項目</th> 　　</tr> 　　<tr> 　　　<td>項目1</td> 　　</tr> 　</table> </div> 拙い文章で恐縮ですが、ご助言いただけると大変助かります。 説明不足や意味不明箇所は補足させていただきますので、どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSSレイアウトでの中央寄せ

    　 おせわになります。 bodyに背景画像を指定し、CSSで中央寄せをしているのですが、 動作確認でブラウザ幅をこまかく拡大・縮小を繰り返すと、 背景画像とコンテンツ部とが1pxずれる事があります。 Win IE6.0、7.0、MacOSX safari2.0でこの現象がおき、FF2.0はWin&Macともに問題ありません。 この解決方法はありますでしょうか。 ご教授のほど、よろしくお願いいたします。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <style type="text/css"> <!-- body { margin:0; padding:0; text-align:center; background: url(http://www.geocities.jp/ajax3210/bg.gif) center top repeat-y; } #wrapper { width:746px; height:100px; background-color: #CCCCCC; margin-left:auto; margin-right:auto; text-align:left; } p { margin:0; padding:0; } --> </style> </head> <body> <div id="wrapper"> <p>テスト</p> </div> </body> </html>

    • ベストアンサー
    • HTML
  • floatを使用すると中央寄せにならない

    CSSについて質問があります。 floatを使って2段組のレイアウトにしたのですが、 MacのIE5.2で見ると、floatを使ったdiv（container）だけ中央寄せではなく 左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。 URL：http://fuma.xrea.jp/ /* CSSソース*/ html{height : 100%; width : 100%;} body{width : 100%; text-align : center; margin : 0px auto; padding : 0px;} #container{ margin : 0px auto; padding : 0px; width : 720px;} div#main{ text-align : left; width : 490px; margin : 0px; padding : 8px 0px; float : left;} div#side{ margin : 0px; padding-bottom : 8px; text-align : left; width : 230px; float : right;} div#copyright{ text-align : center; margin : 0px auto; padding : 10px 0px; clear : both; width : 720px;} /* HTMLソース */ <div id="container"> <div id="side">てすと</div> <div id="main">てすと</div> </div> <div id="copyright">test</div> <div align="center">を使っても中央寄せになりませんでした。 どうすれば、MacのIEでも中央寄せにできますか？

    • ベストアンサー
    • CSS
  • CSSで文字が流れ込んでしまいます

    CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。 どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>

    • ベストアンサー
    • HTML
  • <img>タグにCSSのclass設定可能？

    <img>タグにスタイルシートのclassは、直接設定できるのでしょうか？ 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1： ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します（ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。）。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか？できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか？ 質問2： また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する