![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
今まで、ヘッダー、メインスペース、サイドスペース、フッターの構造でWebサイトを作成していました。
この時は、中央寄せで文字も画像も左からレンダリングされていました。
そこで、とあるページはメインスペースだけにしようと思い、HTMLとCSSを記載致しましたが、ブラウザの中央に表示することができなくなりました。
たしか、 text-align: left; というのは文字や画像が左から配置されることですよね?
ページ全体をブラウザの中央にもってくるには、どうしたら良いのでしょうか?
例えば、次のCSSのコードは、メインスペースを規定しております。
#main {
width: 592px;
line-height : 185% ;
font-size: 13px;
text-align: left;
float: left;
font-family: "MS Pゴシック",sans-serif;
}
私が作成しようとしているページではヘッターもフッターもサイドバーも無く、メインスペースだけです。
なので、HTMLのbody内のコードは、この#mainで囲んで、その子要素にクラスとかを使ってます。
この方法では、ブラウザの中央に表示させることはできないのでしょうか?
No.3ベストアンサー
- 回答日時:
#main {
width: 592px;/*箱の大きさを指定*/
line-height : 185% ;
font-size: 13px;
text-align: left;/*箱の中の文字を左にの意味★*/
margin-left:auto;/*左右のマージンautoで箱を中央にの意味☆*/
margin-right:auto;
/*float: left;これ消します。有れば、箱を本来の流れから切り離して左に寄せる指定となります。*/
font-family: "MS Pゴシック",sans-serif;
}
cssではインライン要素(<a><strong>など行内要素)とブロックレベル要素(<h1><h2><p><table><ul><div>……上下に改行がつく塊の要素)があります。
★インライン要素にのみtext-alignは有効で
☆ブロックレベル要素にのみmargin:X auto;は有効です。
既に付いていますが、widthで幅を指定しないと初期値が100%なので、100%のエリアに100%の入れ物を入れて中央に持ってきても、遊びがないので、中央には見えません。ので、ブロックレベル要素を中央に置きたい場合は、widthと左右のmargin:autoのセットとなります。
No.2
- 回答日時:
標準準拠モードで、body直下が<div id="main">だとすると、
#main {
width: 592px;
line-height : 185% ;
font-size: 13px;
text-align: left;
/* float: left; */ margin: 0 auto;
font-family: "MS Pゴシック",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: "MS Pゴシック",sans-serif;
}
------------------
以下でも出来るが推薦しない・・・
<center> とか <div align="center">
No.1
- 回答日時:
こんばんわ!
> たしか、 text-align: left; というのは文字や画像が左から配置されることですよね?
そうです、左寄せ…という意味になります。
> ページ全体をブラウザの中央にもってくるには、どうしたら良いのでしょうか?
色々方法はありますが、<div align="center">
を使うのが1番楽なんじゃないでしょうか?
(全てセンタリングでよければ…)
> そこで、とあるページはメインスペースだけにしようと思い、HTMLとCSSを記載致しましたが、ブラウザの中央に表示することができなくなりました。
セレクタの優先順位が低いからでしょうね。
どう記述されているのか分からないので、
この辺りを参照してCSSを修正されるとよいかと思います。
http://css-happylife.com/archives/2007/0113_2250 …
CSSってセレクタとか時々混乱しますよね…。
めげずにガンバって下さい!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript htmlとcssに関する質問です 3 2022/12/06 05:36
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
端から端まで横線を引きたい
-
<legend>で表示されるタイトル...
-
<h1>タグの後の行間を詰めたい。
-
INPUT TEXT内の文字位置を指定...
-
ホームページビルダー 空白の...
-
なぜ左に寄っているの?
-
pタグによる段落間のアキ調整...
-
インラインフレームの表示位置...
-
HTMLフォームのSELECTの幅を一...
-
aタグに直接style=""で:hoverを...
-
Dreamweaverで画面サイズを一定...
-
Excel で等間隔で縦線を引きた...
-
<tbody>は何のためにあるんでし...
-
htmlでテーブル内にテキストボ...
-
HTMLでテーブルを縦に並べたい!
-
table内で画像と文字をセンター...
-
ワードで、横書きの数字を縦書...
-
エクセルでサイズに合ったもの...
-
テーブルを画面にの幅いっぱい...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
なぜ左に寄っているの?
-
インラインフレームの表示位置...
-
text-alignの解除の方法
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
端から端まで横線を引きたい
-
FireFoxで見るとブラウザの幅に...
-
macとwindowsのレイアウト崩れ...
-
ホームページビルダー 空白の...
-
<legend>で表示されるタイトル...
-
INPUT TEXT内の文字位置を指定...
-
CSSで、height:100%の中央寄せ
-
CSSの設定
-
テキストボックスの様に文字の...
-
フッターだけが真ん中に行って...
-
スタイルシートでh1の属性行間...
おすすめ情報