• 締切済み

外部cssでの表作成についての質問です。

　メモ帳でホームページを作っているものです。 　外部cssで表を作っているのですが、表自体のの配置をIE9(Fairfaxやchromeではうまくいきました)で左右中央ぞろえにすることができなくて困っています。 　様々なサイトを参考にさせてもらっているのですが、それぞれ主張していることが違っていたりしてよくわかりません。 htmlは <div class="sample"> <h4>更新中</h4></div> cssは .sample { display: table-cell; margin-left : auto; margin-right : auto; text-align: center; width: 790px; height: 70px; vertical-align: middle; background:#ffffff; border-style: solid; border-width: 12px; border-color:#bbdbf3; } .sample h4 { display: inline-block; text-align: left; } で、IEでは左寄りになってしまいます…　 どなたかご教示お願いします。

みんなの回答

回答No.1

div要素のようなブロックレベル要素をセンタリングするには「text-align」は使いません。 ご注意ください。 http://www.css-lecture.com/log/css-beginner/026.html

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • CSSでバックグラウントカラーの途切れを直したい

    CSS初心者です。 CSSでfloatを利用してプロックを左右に並べています。 その際、左のブロックにbackground-colorを指定していますが、右のブロックの情報が多かった場合に、background-colorが途中で終わってしまいます。 どのようにしたらよいでしょうか。 下記のCSSもおかいしところがあるかも・・・指摘をお願いします。 #page { width: 750px; margin-right: auto; margin-left: auto; text-align: left; border: 1px solid #666666; margin-bottom: 0px; } div.blocka{ float: left; background-color: #FFC556; width: 150px; margin:0px 0px 0px 0px; padding:5px ; border-right:1px solid #666666 ; } div.blockb { float: left; margin:0px 0px 0px 0px; padding:10px ; width: 550px; }

    • ベストアンサー
    • HTML
  • IEとFireFoxでCSSの見た目をそろえたい

    CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが 完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。 足し算はあっているはずなのですがどこを修正すればよいのでしょうか？ HTML <body> <div id="wrapper"> <div id="container"> <div class="header"> <h1>&nbsp;</h1> </div> <div class="kaijyo"></div> <div class="main"> <div></div> <h2>&nbsp;</h2> <div class="kaijyo"></div> <div class="line"> <hr> </div> </div> <div class="menu"> </div> <div class="kaijyo"></div> <div class="footer"> <p>&nbsp; </p> </div> </div> </div> </body> CSS #wrapper{ text-align:center; /*IE対応*/ } #container { width: 980px; margin-left:auto; margin-right:auto; background-color:#CAB59B; text-align:left; } .header{ width: 970px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#000000; text-align:left; height:20px; } .main{ width: 670px; float: left; margin: 0px 0px 0px 0px; padding: 10px 15px 10px 15px; background-color:#E4E4E4; text-align:left; } .menu{ width: 260px; float: left; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; background-color:#CAB59B; text-align:left; } .footer{ width: 970px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#FFFFFF; text-align:left; } .kaijyo{ clear: left; }

    • ベストアンサー
    • CSS
  • CSSでページ作成、Firefoxでうまく表示できません

    ご教授いただけますでしょうか。 CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。 内容は、大枠の中に、ヘッダーと左右のフロート（左：メニュー、右：内容）のシンプルなデザインです。 以下、CSS部分です。 /* 大枠 */ #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-size: 13px; border-left: 1px #663333 solid; border-right: 1px #663333 solid; border-top: 1px #663333 solid; border-bottom: 1px #663333 solid; padding: 5px; text-align: left; } /* ヘッダー */ .header { width: auto; height: auto; background: url(img/header.jpg) repeat-x; margin: 0px; } /* メニュー */ .left { float:left; width:20%; background-color:#ffffff; padding: 5px; } /* 内容 */ .right { float:right; width:75%; background-color:yellow; padding: 5px; } ここからHTMLに書き込んだものです。 <div id="container"> <div class="header">　ヘッダー　</div> <div class="left">　メニュー　</div> <div class="right">　内容　</div> </div> Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。 どこがおかしいか、ご指摘いただければ幸いです。 どうぞよろしくお願い申し上げます。

    • ベストアンサー
    • CSS
  • CSS3で困ってます！

    現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして… 背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。 ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。 今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません！教えてください（涙） CSSは、 @charset "utf-8"; /* CSS Document */ *{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } a{ text-decoration:none; } div#top{ width: 920px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 3px 3px 10px #666; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; -o-box-shadow: 3px 3px 10px #666; text-align:left; margin:0 auto; } div#header{ text-align:center; } div#banner{ width: 900px; margin: 0px auto; } div#menu{ width: 900px; margin: 0px auto; } div#menu ul { float:left; margin:0; padding:0; height: 40px; text-align:center; } div#menu li { margin:0; padding:0; float:left; font-size:90%; text-align:center; list-style-type:none; width: 225px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.25s; -moz-transition-property: background-color; -moz-transition-duration: 0.25s; -o-transition-property: background-color; -o-transition-duration: 0.25s; background-color: #3C0; height: 40px; } div#menu li span { font-family:verdana; font-size:140%; color:#fff; line-height: 40px; } div#menu li:hover{ background-color: #0F0; } div#contents{ width:900px; height: auto; margin:0 auto; padding: 10px 0; } div#info { float:left; width:450px; } div#info h2{ font-size: 25px; width: 450px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; background-color:#090; color: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; text-align:left; } div#info dl dt { clear:left; float:left; width:7em; padding:10px 0.5em; } div#info dl dd { margin-left:0; padding:10px 0.5em 10px 8em; background:#fff url(images/bg_info_line.gif) 0 100% repeat-x; } div#news{ float: right; width: 430px; text-align:left; } こんな感じです。 実際のページはここにあります。 http://skino.cyber-ninja.jp/test/

    • ベストアンサー
    • CSS
  • CSSで全体をセンタリングしたい

    navi　address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ？レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか？ ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------

    • ベストアンサー
    • 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
  • HTML、CSSについて分からないことがあります

    下記の2パターンのコードを書きました。 一番目のコードのように、CSSファイルでdivの中に、text-decoration: noneと書いたのですが、うまく実行されませんでした。しかし2番目のCSSファイルのように、＜a＞で指定するとうまくできました。 質問ですが、 (1)<a>で区切らずに、<div>ではできないのでしょうか？ ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; } a { text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーHTML－－－－－－－－－－－－－－－－ <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>About Me</title> </head> <body> <img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/> <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/> <div> <a href="https://facebook.com">Join us<span>Facebook<span> </a> </div> </body> </html>

  • HTML、CSSについて分からないことがあります

    下記の2パターンのコードを書きました。 一番目のコードのように、CSSファイルでdivの中に、text-decoration: noneと書いたのですが、うまく実行されませんでした。しかし2番目のCSSファイルのように、＜a＞で指定するとうまくできました。 質問ですが、 (1)<a>で区切らずに、<div>ではできないのでしょうか？ ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; } a { text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーHTML－－－－－－－－－－－－－－－－ <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>About Me</title> </head> <body> <img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/> <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/> <div> <a href="https://facebook.com">Join us<span>Facebook<span> </a> </div> </body> </html>

    • ベストアンサー
    • CSS
  • cssレイアウトで表を作成したいです。

    添付した画像の様な表組みをテーブルタグを使用せずに作成するのは可能なのでしょうか？ もしくは表はテーブルタグを使用したほうが、ソースの量は少なくて済むのでしょうか 全体を囲うBoxAは"height:auto;"を指定してボックスBoxBのテキストの量によって可変する。BoxCのテキストは常にBoxBの最下行と揃える。 /*css*/ .BoxA{ width:490px; height:auto; margin:0px auto 10px auto; background-color:#999999; border:solid #999999 1px;} .BoxA .BoxB{ width:350px; height:auto; margin:0px; padding:5px; float:left; background-color:#fffbfb;} .BoxA .BoxC{ width:129px; height:auto; margin:0px; padding:0px; float:right; background-color:#fffbfb; } .clearfloat { clear:both;} <!--ソース--> <div class="BoxA"> <div class="BoxB"> <p>■■■■■■■■■■<br /> ■■■■■■■■■■<p/> </div> <div class="BoxC"> <p style="margin:auto 0px 0px;">■■■■■■■■■■</p> </div> <br class="clearfloat" /> </div>

    • ベストアンサー
    • HTML
  • CSSレイアウトについて

    cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか？ また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ～略～

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する