• ベストアンサー

CSSのDIV要素

CSSのDIV要素を使ってボックスを作ったんですが、 外部スタイルシートに書き込んで、下記のようにする方法はありませんか? <center> <DIV align="left"> </DIV> </center> ボックス本体を画面の中央に持っていき、内容は左揃えにしたいのです。 どなたか知っている方がいましたら、教えてください。

  • HTML
  • 回答数5
  • ありがとう数1

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

  • ベストアンサー
  • goldfox
  • ベストアンサー率49% (123/249)
回答No.4

<DIV id="left"> 内容 </DIV> #left{ margin:auto; width:400px; text-align:left; } これだけではIEで中央寄せにならないので、 body{ text-align:center; } も加えます。

その他の回答 (4)

  • partita
  • ベストアンサー率29% (125/427)
回答No.5

align="left"は、divそのものを左に寄せると言う意味です。<center>は、このタグの中身を中央揃えにします。配置記述は、どこに記述すればよいのか迷いますよね。ただ、この書き方は推奨されませんので、#4さんの記述になります。 ブロック要素とインライン要素はわかりますか? ブロック要素は「箱」、インライン要素は「中身」のようなものです。 「箱」を中央揃えにするときはmargin:auto; 「中身」を中央揃えにするときはtext-align:center;を いずれも「箱」のタグのスタイルとして適用します。 提示の例だと、DIVが「箱」です。「中身」はテキストや画像です。

noname#19206
noname#19206
回答No.3

ちょっとややこしい方法をとる必要があります。詳しくは参考 URL を参照。

参考URL:
http://www.mozilla.gr.jp/standards/webtips0004.html
  • suzuko
  • ベストアンサー率38% (1112/2922)
回答No.2

id要素でなくて<div>で指定するのですね。 ******CSS******* .center { text-align: center; } .left{ text-align: left; } *****thml******** <div class="center"> <div class="left"> </div> </div> か <div class="left">を<p class="left">にするとか・・・あまり一般的でないとは思いますが。

  • sheltie
  • ベストアンサー率52% (280/529)
回答No.1

例えば .left というクラスで作り、その中に『text-align : left;』 をつくっておきます。 そうしてから、 <center> <DIV class="left">○○○○○</DIV> </center> とすれば、DIV自体は画面中央に配置され、文字(この場合は○○○○○) は左揃えになります。

関連するQ&A

  • CSS・DIVについて

    CSS初心者ですが、質問させていただきます。 <やりたいこと> 同一ページ内にて、下記の(1)(2)をCSSで指定したい。上から(1)(2)(1)の順で表示したい。 (1)幅700、文章中央揃え (2)幅600、文章左揃え <私が作成したもの> (関係ない部分は省略しています。) (実際は、(1)(2)の部分は半角英字の名前をつけています) <head> <style type="text/css"> body { text-align: center; } div#(1) { width: 700px; margin: 0 auto; text-align: center;       } div#(2) { width: 600px; margin: 0 auto; text-align: left; } </style> </head> <body> <div id="(1)">タイトル</div> <div id="(2)">説明文</div> <div id="(1)">ホームに戻る</div> </body> <表示のされ方> (1)は正常に表示されているのですが、(2)にはCSS自体が適用されていないのです。 ちなみにIE9では私の思うように表示されるのですが、IE10になって表示されなくなりました。 なぜこのようになったか、お教えいただけますでしょうか。よろしくお願いいたします。

    • 締切済み
    • CSS
  • リンクを横に並べるには、どうすればいいですか?

    リンクを下記のように並べたいのですが、CSSにはなんと記述すればいいでしょうか?    リンク1(中央揃え)   リンク2(右揃え) なぜか、下記のようになってしまいます。 リンク1(中央揃えにしたいのに、左揃え状態)                                リンク2(右揃えになっているけど、改行されてしまう) margineかpaddingで設定するしかないでしょうか? 文章が見づらくて、すいません。私が記述したHTML・CSSのソースを下記に載せます。 よろしくお願いします。 /*---------- CSS部分(外部スタイルシートに記述) ----------*/ div#inline { display: inline; } div#center { text-align: center; } div#right { text-align: right: } /*---------- HTML部分 ----------*/ <div id="inline"> <div id="center"><a href="~○○">リンク1</a></div> <div id="right"><a href="~○○">リンク2</a></div> </div>

    • ベストアンサー
    • CSS
  • テーブルとDIVとCSSについて質問です。

    テーブルとDIVとCSSについて質問です。 テーブルタグのtdにdivで、写真を入れたい(写真の周りにdivで枠の飾りみたいのをつけたいから)です。 その下に、CSSで定義した文字を入れたいのですが、 tdが横に2つ(=つまり、写真が2つ並ぶ)と、左の写真の下の文字を3行にし、 右の写真を下の文字を2行にすると、縦の中央になってしまい、 右が少し下にきてしまいます。 どう、定義したらいいでしょうか? また、その文字らを、text-align="center"でCSSで定義しても、 デザインですとセンターに見えても、ブラウザでみると、左揃えによってしまいます。 どう書いたらいいか、あわせて教えてください。 また、tableにdivを入れたらダメの場合は、どうやったら、いいか教えて下さい。 よろしくお願いします。

  • 【CSS】floatで左右に並べた<div>を下揃えにできますか?

    CSS(スタイルシート)においてfloatで2つのdivを左右に並べる方法は定番ですが、この2つのblockレベル要素は高さが違えば下部が不ぞろいになります。 これは仕方ないとして、上部が不揃いになってもいいので下揃えにできませんでしょうか? text-align:bottom;やvertical-align:bottom;ではできませんでした。tableを使えば可能でしょうが今回はtableなしという事でお願いいたします。

    • ベストアンサー
    • 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
  • 文章をCSSで左揃えにする方法

    趣味でHPをつくっているのですが、 基本左揃えで文章をつくっています。 そこで、文の途中にイメージを真ん中ぞろえで配置したりすると、 それ以降の分が真ん中ぞろえになってしまうので、 すべての文に <p align="left">を指定しています。 しかしそれではすべての文に入力されてしまうので、 とても乱雑なHTMLになってしまいます。 ですので、できればCSSのdivで囲って本文を左揃えに指定したいですが、外部スタイルシートファイルにはどのような記述をすればいいのでしょうか? 自分でやってみたのですが、 どうもうまくいかなくて困っています。 お詳しい方よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • div要素をセンタリング

    <div style="width:300px; text-align:center; border:1px dashed red;"> この文字は中寄せ <div style="width:200px; border:1px dashed green;"> このボックスも中寄せ </div> </div> このようなHTMLを表示すると、 IEでは、赤い枠の左右中央に緑の枠が入り、「この文字は中寄せ」という文字と、緑の枠が縦にきれいに並ぶのですが・・ネスケやOperaでは、緑の枠が左に寄ってしまいます。 これを、中央に寄せる方法はないでしょうか? (表示が遅くなるのを防ぐために、テーブルは使いたくありません)

    • ベストアンサー
    • HTML
  • CSSのセンタリングが、「div」で何故か出来ない

    下記のアドレスのホームページについてです。 http://sky.geocities.jp/thanksv0358/index.html# HTMLで、 <body> <div id="main"> ~ </div> </body> とし、CSSで #main{ text-align:center; margin-left:auto; margin-right:auto; text-align:left; } としたにもかかわらず、何故かセンタリングができません。 今回、最初の<!DOCTYPE~の部分から全部、自分で書いてみました。 詳しい方がいましたら、よろしくお願いします。

  • inline-blockを上下中央揃えにする方法

    以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法

    • 締切済み
    • CSS
  • cssでメインコンテンツをセンタリングする方法

    cssでメインコンテンツをセンタリングする方法に関する質問をお願いいたします。 下記のサイトなどをみると、 http://www.css-lecture.com/log/css-beginner/026.html *xhtml <body> <div id="wrapper"> <h1>サイト全体を中央に配置にする</h1> <p>サイト全体を中央に配置にする為のテキスト</p> <!--/ #wrapper--></div> </body> *css body { text-align: center; } div#wrapper { width: 800px; margin: 0 auto; text-align: left; border: 1px solid #FF0000; } (1)「body」においてもセンタリングを行っているいるのですが、 それはどうしてでしょうか。 「div#wrapper」だけのセンタリングでは不十分なのでしょうか? > body { text-align: center; } > (2)また、「p」などのインライン要素は { text-align: center; } を使い、 「id」などのブロック要素は { margin: 0 auto; text-align: left; } を使いますすが、 body要素に対しても、 { text-align: center; } とすることが出来るのでしょうか? (3)あと、「div#wrappe」で囲ったブロックの中の 「p」や「id」で囲ったコンテンツの中身のテキストは 「div#wrapper」の「 text-align: left; 」で 全て左寄せになりますか? 参考書などを見ても解りづらかったので 教えていただきたくお願い致します。m(_ _)m その他参考URL: http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1010809440

    • ベストアンサー
    • CSS

専門家に質問してみよう