中央寄せで左書きの方法を教えて下さい。

質問

今まで、ヘッダー、メインスペース、サイドスペース、フッターの構造でWebサイトを作成していました。
この時は、中央寄せで文字も画像も左からレンダリングされていました。

そこで、とあるページはメインスペースだけにしようと思い、HTMLとCSSを記載致しましたが、ブラウザの中央に表示することができなくなりました。

たしか、 text-align: left; というのは文字や画像が左から配置されることですよね？
ページ全体をブラウザの中央にもってくるには、どうしたら良いのでしょうか？

例えば、次のCSSのコードは、メインスペースを規定しております。

#main {
width: 592px;
line-height : 185% ;
font-size: 13px;
text-align: left;
float: left;
font-family: "ＭＳ Ｐゴシック",sans-serif;
}

私が作成しようとしているページではヘッターもフッターもサイドバーも無く、メインスペースだけです。
なので、HTMLのbody内のコードは、この#mainで囲んで、その子要素にクラスとかを使ってます。

この方法では、ブラウザの中央に表示させることはできないのでしょうか？

回答No.3

DrFell · ベストアンサー

#main {
width: 592px;/*箱の大きさを指定*/
line-height : 185% ;
font-size: 13px;
text-align: left;/*箱の中の文字を左にの意味★*/
margin-left:auto;/*左右のマージンautoで箱を中央にの意味☆*/
margin-right:auto;
/*float: left;これ消します。有れば、箱を本来の流れから切り離して左に寄せる指定となります。*/
font-family: "ＭＳ Ｐゴシック",sans-serif;
}

ｃｓｓではインライン要素（<a><strong>など行内要素）とブロックレベル要素（<h1><h2><p><table><ul><div>……上下に改行がつく塊の要素）があります。
★インライン要素にのみtext-alignは有効で
☆ブロックレベル要素にのみmargin:X auto;は有効です。

既に付いていますが、widthで幅を指定しないと初期値が100％なので、100％のエリアに100％の入れ物を入れて中央に持ってきても、遊びがないので、中央には見えません。ので、ブロックレベル要素を中央に置きたい場合は、widthと左右のmargin:autoのセットとなります。

お礼

ありがとうございます！！

教えて頂いた通りにやったら、できました！！
ありがとうございます！！

回答No.2

naokita

標準準拠モードで、body直下が<div id="main">だとすると、

#main {
width: 592px;
line-height : 185% ;
font-size: 13px;
text-align: left;
/* float: left; */ margin: 0 auto;
font-family: "ＭＳ Ｐゴシック",sans-serif;
}

-------------------

過去モードだと（旧IE用）

body{ text-align: center;}
#main {
width: 592px;
line-height : 185% ;
font-size: 13px;
text-align: left;
/* float: left; */ margin: 0 auto;
font-family: "ＭＳ Ｐゴシック",sans-serif;
}

------------------

以下でも出来るが推薦しない・・・
<center> とか <div align="center">

お礼

ありがとうございます！！

回答No.1

bvltiggeari

こんばんわ！

> たしか、 text-align: left; というのは文字や画像が左から配置されることですよね？
そうです、左寄せ…という意味になります。

> ページ全体をブラウザの中央にもってくるには、どうしたら良いのでしょうか？
色々方法はありますが、<div align="center">
を使うのが1番楽なんじゃないでしょうか？
（全てセンタリングでよければ…）

> そこで、とあるページはメインスペースだけにしようと思い、HTMLとCSSを記載致しましたが、ブラウザの中央に表示することができなくなりました。
セレクタの優先順位が低いからでしょうね。
どう記述されているのか分からないので、
この辺りを参照してCSSを修正されるとよいかと思います。
http://css-happylife.com/archives/2007/0113_2250.php

CSSってセレクタとか時々混乱しますよね…。
めげずにガンバって下さい！

お礼

ありがとうございます！

参照して修正致します！！