人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

サイトの中央寄せ表示のやり方を教えてください。
Dreamweaverでサイトを作成しているのですが、サイトを中央寄せするやり方がわかりません。

●質問者: yoshida39
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 7/7件

▽最新の回答へ

1 ● matane
●29ポイント

CSSに次のように書いたら良いですよ。

body {

width: 800px;

margin-top: auto;

margin-right: auto;

margin-bottom: auto;

margin-left: auto;

}


----

追記:

・・・って、以前の質問の回答のままでしたね・・・

http://q.hatena.ne.jp/1276500397


2 ● jpops
●29ポイント

CSSでする方法としては、一例

body {text-align: center;}

div#wrapper {

width: 800px;

margin: 0 auto;

text-align: left;

border: 1px solid #FF0000;}



HTMLでは、単純に

ここに文字を入れます

または

ここに文字を入れます


ご参考http://html.eweb-design.com/0307_cnt.html


3 ● よたか
●29ポイント

私の場合は下記の感じで作成してます。

<html>

<head>

<style>

body{

text-align:center;

background-color:#efefef;

}

#main{

width: 800px;

margin: 0 auto;

text-align: left;

border:1px solid #ccc;

}

</style>

</head>

<body>

<div id="main">

ここにメインコンテンツを入れます。

</div>

</body>

</html>

このままコピーしていただければ使っていただけるかと思います。


4 ● Q-A
●29ポイント ベストアンサー

ソースやコードは他の方のものを見てください。皆さん同じ事をされています。その説明をします。

  1. サイトを中央にとの事なので、サイト全体を汎用ブロック要素の< div>で囲みます。(単純なデザインだとbodyでもokです。)
  2. 1.の幅(width)を決めます。(500pxの箱が中央なのと、700pxの箱が中央なのでは位置が違ってきます。初期値は100%です。親要素に対して100%なのでいっぱいいっぱい取ってしまって空きがないので中央には行きません。)
  3. 1.をmargin-left:auto;margin-right:auto;します。(一般的、他の方もこれ)
    または画面の割合を計算してmarginを取ります。(画面100%、1.の幅が80%なら左右のmarginは10%ずつ)
  4. 以上が正しいブロック要素の中央寄せ。ただし、プログラムミスにより、ブロック要素の中央よせが効かないブラウザがあるので、body全体にインライン要素に対する中央よせであるtext-align:centerを付けます。
  5. 4.でbodyへ文字列の中央寄せをしてしまったので、bodyの子要素に継承されます。箱は中央だけど、中身は左寄せにしたいので、1.のdivに文字列は左揃えであるtext-align:left;を指定します。

完成


5 ● jpops
●28ポイント

ごめんなさい文字消えてますね。

タグ入れると、はてなはタグとよんで表示してしまうようです。

下の■のところを<に変えてやってみてください。

No.2補足です


■Center■ ここに文字を入れます ■/Center■

■Div Align="center"■ ここに文字を入れます ■/Div■


1-5件表示/7件
4.前の5件|次5件6.
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ