記事をページの真ん中に配置する（センタリング）方法

未分類

2019.09.272019.09.05

記事をページの真ん中に配置する（センタリング）方法

テンプレートキングでサイトを作成していたら、記事が左に寄ってしまいました。

こちらのサイトに解決策が記載されていましたので、利用させていただきました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

body
    {
     margin:0px;          /* ページ全体のmargin */
     padding:0px;         /* ページ全体のpadding */
     text-align:center;   /* 下記のautoに未対応用のセンタリング */
    }

#main
    {
     margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:left;     /* 中身を左側表示に戻す */
     width:650px;         /* 幅を決定する */
    }

 -->
 </style>
 </head>
 <body>

        <div id="main">この中にページ内容を入れます。</div>

 </body>
</html>

今回は、stylesheetを触らず、カスタマイズー＞追加CSS欄にコードを挿入しました。

カスタマイズに追加CSS欄がない場合は、投稿の編集ページの一番上にある「表示オプション」をクリックして、「カスタムCSS」にチェックを入れると、ページの一番下に「カスタムCSS」を挿入する欄が表示されます。
挿入したコード：

body
    {
     margin:0px;          /* ページ全体のmargin */
     padding:0px;         /* ページ全体のpadding */
     text-align:center;   /* 下記のautoに未対応用のセンタリング */
    }

#main
    {
     margin-left:auto;    /* 左側マージンを自動的に空ける */
     margin-right:auto;   /* 右側マージンを自動的に空ける */
     text-align:left;     /* 中身を左側表示に戻す */
     width:650px;         /* 幅を決定する */
    }

これで、確かにページの真ん中に記事がセンタリングされました。

しかし、フッターなどの文字もセンタリングされてしまいました。
これの問題は、

text-align:center;   /* 下記のautoに未対応用のセンタリング */

をコメントアウトすることで解消しました。

これで、目的が果たせました。