• ベストアンサー

HTML文を中央でそろえるスタイルシートの書き方

下記のHTML文を中央揃えにするには、どうクラスを設定して、スタイルシートを編集すべきでしょうか？ <div> <div> <img src="./img/abc.png"> <p class="title">あいうえおかきくけこさしすせそ</p> </div> </div> 中央揃えというのは、タイトル（あいうえおかきくけこさしすせそ）の上に、画像（abc.png）が乗っており、左右に均等の余白のある状態です。 凸のようなかたちですね。 タグ、クラスの追加は可能とします。 よろしくお願いします。

  • CSS
  • 回答数2
  • ありがとう数4

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

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5238/13705)
回答No.1

前後が記載されていないので<body>～</body>の間に記載されているHTMLだけがある前提ですと ========== <div> <div style="text-align:center;"> <img src="./img/abc.png"> <p class="title">あいうえおかきくけこさしすせそ</p> </div> </div> ========== で中央揃えになります。 直接スタイルを書くのが嫌なら <div style="text-align:center;">　⇒　<div class="hoge"> とし <style> .hoge { text-align:center; } </style> を付け加える事で同じ結果になります。

p3kq4h9f
質問者

お礼

確認しました。お見事です。 回答ありがとうございました。

その他の回答 (1)

  • retorofan
  • ベストアンサー率34% (435/1276)
回答No.2

HTML要素はブロック要素とインライン要素の２種類に大別されます。 このソースでIMGタグはインライン要素で、 コンテンツの幅だけを占有し、次の要素は同じ行に続きます。 ところが、次のPタグはブロック要素なので、改行されて、 画面全体の幅を占有します。 このままだと、左側に画像（abc.png）が表示されて、その下部に 「あいうえおかきくけこさしすせそ」の文字列が表示されます。 （ブロック要素とインライン要素の意味が熟知している人なら、 　ソースを見ただけでイメージ化できる筈です） さて、本題の 「左右に均等の余白のある状態で凸のようなかたちに表示させる」。 そのテクニック（技法）は、１つしか無いということではありません。 そこで、１例を挙げておきます。 <style> .box { text-align: center; } .inner { display: inline-block; margin: 0 auto; } </style> <div class="box"> <div class="inner"> <img src="./img/abc.png"> <p class="title">あいうえおかきくけこさしすせそ</p> </div> </div> CSSは、HTMLソース全体を容器(box）と考えて、 画像とテキストを内側（inner）に収めている。 そう考えたものです。 どうぞ、お試しください。

p3kq4h9f
質問者

お礼

まさに、 『このままだと、左側に画像（abc.png）が表示されて、その下部に 「あいうえおかきくけこさしすせそ」の文字列が表示されます。』 の状態でした。 margin: 0 auto;　で中央寄せですね。 全体と内側にわける方法ですね。 ご回答ありがとうございました。

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

関連するQ&A

注目のQ&A

カテゴリ

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

専門家に質問してみよう

職業から探して質問する
質問する