ビジネスクラフト BUSINESS CRAFT
0
MENU CLOSE

ビジネスクラフト BUSINESS CRAFT

ビジネスクラフト BUSINESS CRAFTビジネスクラフト BUSINESS CRAFT
  • ホーム
  • HP制作プラン
  • 制作料金 各種
  • 制作実績
    • 制作実績一覧
    • ウェブホームページ
    • アニメーション
    • 動画映像制作・編集
    • 講習コンサルティング
  • カテゴリー
    • ウェブデザイン
    • WordPress
    • マーケティング
    • ネットビジネス
    • インターネットの使い方
  • 会社概要
  • 免責事項ポリシー
  • お問い合わせ
  • 高速表示

CSSで真ん中に配置(センターリング)する方法

ON 2018年5月21日 BY: ビジネスクラフト 1 COMMENT
スポンサーリンク

CSSで真ん中に配置(センターリング)する方法

 

 

XHTML

    <div class="main">  
        <h2>ブロックレベル要素をセンタリング</h2>  
        <p>ブロックレベル要素</p>  
    </div>  

 

CSS

    .main {  
        width: 100%;   
        margin: 0 auto;  
    }  

 

横幅を縮めて真ん中に配置するCSSコード

.main div   {  
    width: 80%;
    margin: 0 auto;  
}  

↑

classで指定した部分を真ん中にする時は「margin: 0 auto;」と指定。

 

 

auto非対応ブラウザの対応方法

IE(インターネットエクスプローラー)への対策

IE5.5やIE5ではauto非対応なので、対応させるためにこの様にCSS記述。

スポンサーリンク
.main {  
    width: 100%;  
    border: 1px solid #000;  
    text-align: center;  
}  

横幅を縮めて真ん中に配置するCSSコード

.main {  
    width: 80%;  
    border: 1px solid #FF0000;  
    margin: 0 auto;  
    text-align: left;  
} 

 

この様に記述しておけば、全てのブラウザで真ん中(センタリング)表示できます。

 

 

スポンサーリンク
前へ
次へ

1 Response

コメントを書く Cancel Reply

  • 高速表示

    高速表示に切り替え

  • 検索

  • 最近の投稿

    • Mac版Excelで改行する方法
    • 【5分】WordPressサイトをプラグインでAMP対応する方法・導入手順
    • 誰でも書ける論文・レポートの書き方簡単10ステップ
    • AMPが表示されない時のワードプレス対処方法【AMP or WP Accelerated Mobile Pages】
    • WordPressスマホで表テーブルを横スクロールする方法【簡単HTMLコピペ】
    • LINEタイムラインに流れてきた投稿を非表示にする方法
    • LINEのタイムライン「いいね」「シェア」の使い方と設定方法
    • LINE「ホーム」「タイムライン」とは
  • カテゴリー

    • WordPress (61)
    • インターネットの使い方 (57)
    • ウェブデザイン (52)
    • コピーライティング (1)
    • ネットビジネス (6)
    • マーケティング (5)
  • 制作について

    • ホーム
    • HP制作プラン
    • 制作料金 各種
    • 制作実績
    • 会社概要
    • 免責事項ポリシー
    • お問い合わせ
    • 高速表示
  • アーカイブ

    • 2018年6月
    • 2018年5月
  • タグ

    .htaccess (2) AMP (2) Android (1) Animate (1) CSS (8) Excel (1) Facebook (2) Gmail (3) Google (8) Google Adsenseグーグルアドセンス (1) Google Drive グーグルドライブ (2) Googleカスタム検索 (7) HTML・XHTML (10) Instagram (4) iPhone (2) JavaScript(jQuery) (2) Line (3) MAC (6) Photoshop (1) PHP (2) SEO・SEM (2) Twitter (5) Windows (1) WordPressセキュリティ (5) WordPressテーマ (7) WordPressプラグイン (23) WordPress使い方 (13) WordPress子テーマ (4) YouTube (6) アプリ・ソフトウェア (15) カスタマイズ (27) サーバー (5) ドメイン (6) パソコンの使い方 (2) ブラウザ (4) ブラウザ・アドオン (3) ブログ運営収益化 (8) ホームページ制作 (82) 仕事効率化 (9) 便利なサービス (11) 収益化 (3) 情報科学 (3) 文章の書き方 (1)
  • スポンサーリンク



制作実績

  • 制作実績
  • オリジナルアニメーション
  • 動画映像制作・編集
  • ウェブサイト制作実績
  • 講習・コンサルティング

制作依頼について

  • 制作料金 各種
  • ホームページ制作お任せ安心プラン

ご利用について

  • 会社概要
  • 免責事項ポリシー
  • お問い合わせ
©️ Business Craft 2019