CSSでレイアウトをセンターにしたい

質問

CSSで製作したのですが、デザインが右端によってしまいます。
作成している会社のモニターでは真ん中でちゃんとみれるのですが、
家で確認したところ右寄せになっていました。

Centerにもっていくにはどうすればよいでしょうか？
お教えくださいませ(困)
他にもおかしなところがあればお教えくださいませ。
body{
background-color: #000000;
background-image: url(../imgs/back.gif);
cursor: crosshair;
margin: 0;
padding: 0;
}

P{
margin: 0;
text-align: center;
font-family: DejaVuSans;
font-size: 9pt;
color: #C0C0C0;
}

h1{
font-family: serif;
font-size: 3pt;
color: #000000;
}

#wrapper{
width: 800px;
margin-left: 450px;
margin-right: auto;
margin-top: 100px;
}

#logo{
width: 300px;
float: left;
padding-right: 5px;
}

#hako {
margin-top: 80px;
line-height:50px;
padding-bottom: 15px;
float: right;
}

#hako li {
display:inline;
list-style:none;
padding-right:12px;
float: left;
background: url(../imgs/bpin.gif) left top no-repeat;
line-height: 12px;
padding-left: 20px;
}

#hako li{
font-family: DejaVuSans;
font-size: 80%;
}

#hako li a{
color:#C0C0C0;
text-decoration:none;
border-bottom:solid 2px #ADABAE;
}

#hako li a:hover{
color:#66FFFF;
border-bottom:solid 2px #CC0000;
}

#lightbox{
padding: 20px;
width: 100%;
text-align: center;
background-repeat: no-repeat;
}

回答No.3

x_lady007

やりたいことはだいたいこんな感じでしょうか。
※マージン等は要調整

【html】
------------------------------------------------------

<h1>●●●</h1>
<div id="wrapper">
<!-- h1は一つしか書けない -->
<h2><img src="imgs/000.gif" alt="" width="300" height="100" /></h2>
<ul id="hako">
<li><a href="#">HOME</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div id="lightbox"><img src="imgs/topp.jpg" alt="" width="800" height="457" /></div>
<!-- class名付けた方が良い -->
<p class="copylight">Copyright 2009-2010 museo international All Rights Reserved</p>
</div>

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

【css】
------------------------------------------------------

@charset "UTF-8"; /* 文字コード指定 */

body{
background: #000000 url(../imgs/back.gif) left center repeat;
cursor: crosshair; /* 必要? */
margin: 0; padding: 0;
text-align: center;
}
/* 簡単な初期化処理追加 */
h1, h2, h3, h4, h5, h6, p, ul, ol, li {
margin: 0; padding: 0;
font-size: 100%;
}
ul { list-style: none; }
img { border: none; }

h1 {
font-family: serif;
color: #000000;
display: none; /* ってことですよね? */
}
#wrapper {
width: 800px;
margin: 100px auto 0 auto;
text-align: left;
}
#wrapper h2 {
width: 300px;
float: left;
padding-right: 5px;
}
#wrapper ul#hako {
margin-top: 80px;
line-height: 50px;
float: right;
}
/* floatがクリアされてないので追記 */
#wrapper ul#hako:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; }
#wrapper ul#hako { zoom: 100%; }

#wrapper ul#hako li {
font-family: DejaVuSans;
font-size: 80%;
display: inline;
padding-right: 12px;
float: left;
background: url(../imgs/bpin.gif) left top no-repeat;
line-height: 12px; /* 相対値の方が良‥ */
padding-left: 20px;
}
#wrapper ul#hako li a {
color: #C0C0C0;
text-decoration: none;
border-bottom: solid 2px #ADABAE;
}
#wrapper ul#hako li a:hover {
color:#66FFFF;
border-bottom:solid 2px #CC0000;
}
#wrapper #lightbox {
clear: both; /* floatがクリアされてないので追記 */
padding: 20px;
}
#wrapper p.copylight {
text-align: center;
font-family: DejaVuSans;
font-size: 9pt; /* 相対値の方が良‥ */
color: #C0C0C0;
}

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

補足

細かいご指摘とても参考になりました。
さっきのページはできました！
でも次のページも同じようなことがおこっていまして
同じように修正してみたのですがやはりなりません。
一度見てみてもらっていいですか？

body{
background-color: #000000;
background-image: url(../imgs/back.gif);
cursor: crosshair;
margin: 0;
padding: 0;
text-align: center;
}

h1{
font-size: 50%;
color: #FFFFFF;
text-align: left;
font-weight: 200;
}

/*toplogo*/

#wrapper{
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}

/*toplogo*/

#logo{
width: 300px;
float: left;
}

/*navi*/

#hako {
margin-top: 80px;
line-height:50px;
padding-bottom: 15px;
float: right;

}

#hako li {
display:inline;
list-style:none;
padding-right:12px;
float: left;
background: url(../imgs/bpin.gif) left top no-repeat;
line-height: 12px;
padding-left: 17px;
}

#hako li{
font-family: DejaVuSans;
font-size: 80%;
}

#hako li a {
color:#C0C0C0;
text-decoration:none;
border-bottom:solid 2px #ADABAE;
}

#hako li a:hover {
color:#FFFF66;
border-bottom:solid 1px #CC0000;
}

/*font*/

P{

font-size: 68%;
color: #FFFFFF;
text-align: left;
line-height: 20px;

}

.picon{
padding-left: 2px;
padding-top: 3px;
border-style: solid;
border-color: #BF0000;
border-width: 0px 0px 0px 3px;
line-height: 3em;
}

.pp{
line-height: 1.5em;

}

#wrapper0{
position: relative;
width:620px;
margin:0 auto;
padding: 0 10px;
margin-left: 480px;
margin-top: 50px;

}

#hakop{
width: 362px;
position: relative;
left: 100px;
padding: 0px;
float: right;
clear: both;
}

#img{
float: left;
width: 213px;

}

#copy{

text-align: center;
font-family: DejaVuSans;
font-size: 9pt;
color: #C0C0C0;
}

回答No.2

noname#134368

とても簡潔なCSSでレイアウトをセンターにする方法は、以下のソースかと思います。

-----
CSS
-----
body{
text-align:center;
}

#Wapper{
margin-left:auto;
margin-right:auto;
width:800px;
}

-----
html
-----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>センター</title>
</head>

<body>
<div id="wapper">センター</div>
</body>
</html>

htmlとCSSを見ると色々と指摘するところがたくさんあります。

「CSS レイアウト」「CSS 段組み」「CSS カラム」などのキーワードで検索をすると色々と参考になる情報が出てくるので参考にされてはいかがでしょうか。

回答No.1

os6v100i

表示するHTMLが提示されていないので、どの部分が右によるのかよくわからず推測ですが、
#wrapper{
width: 800px;
margin-left: 450px;
margin-right: auto;
margin-top: 100px;
}
これだと、margin-leftが固定ですので、画面サイズによっては右によって見えるかと。
margin-left: auto;
にすれば中央に表示されると思います。

お礼

ありがとうございます。
参考になります。

margin-right: auto;で一度ためしてみます。
決まりごとをひとつひとつ学習していきます。

補足

HTMLはこんな感じなのですが・・・
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="Keywords" content="●●,●●," />
<meta name="Description" content="●●●●" />
<title>museo international</title>

<link rel="stylesheet" type="text/css" href="css/index.css" media="screen, print" />

<link rel="HOME" href="index.html" />
<link rel="NEXT" href="info.html" />
<link rev="made" href="mailto:info@museo-i.co.jp" />

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7676523-4");
pageTracker._trackPageview();
} catch(err) {}</script>
</head>

<body>
<h1>●●●</h1>

<div id="wrapper">
<h1 id="logo"><img src="imgs/000.gif" alt="000.gif(3955 byte)" width="300" height="100" /></h1>
<ul id="hako">
<li><a href="http://www.museo-i.co.jp/index.html">HOME</a></li>
<li><a href="http://www.museo-i.co.jp/info.html">COMPANY</a></li>
<li><a href="mailto:info@museo-i.co.jp">CONTACT</a></li>
</ul>
<div id="lightbox"><img src="imgs/topp.jpg" alt="topp.jpg(107403 byte)" width="800" height="457" /></div>
<p>Copyright 2009-2010 museo international All Rights Reserved</p>
</div>
</body>
</html>