导航使图像偏离中心答案

【问题标题】：navigation throws image off center导航使图像偏离中心
【发布时间】：2011-05-12 06:00:53
【问题描述】：

我已经为此工作了一段时间，似乎无法自己解决问题或在任何地方找到答案。

基本上发生的事情是，我的图像左侧一直有一个垂直导航栏，因此图像不是从浏览器窗口的完全左侧居中到右侧，而是从右侧居中导航栏的一侧到浏览器窗口的右侧。我的标题“desertshore”和我的页面内容实际上都居中。

有没有办法让它看到通过导航栏并围绕浏览器窗口居中？

代码如下：

<html>
<head>
<title>dir</title>

<style type="text/css">
body {
font-family: "Arial", "Helvetica", "Helvetica Neue";
font-size: 14px;
background-image: url('.jpg');
background-position:center;
background-size:50em;
background-repeat:no-repeat;
margin: 30px 0px 0 0;
text-align: left;
color: #333;
}
title {
font-family: "Arial", "Helvetica", "Helvetica Neue";
font-size: 14px;
background-image: url('.jpg');
background-position:center;
background-size:50em;
background-repeat:no-repeat;
margin: 30px 0px 0 0;
text-align: left;
color: #333;
}
div#container {
width:100px;
background:#FFF;
height:auto;
overflow:auto;  
border: 1px solid black;
border-left:0;
float:left;

}

div#site_title {
color:#00ffff;
text-transform: lowercase;
font-weight: ;
font-size: 35px;
line-height: 15px;
margin: 0 0 0 0px;
}

div#site_title2 {
color:#00ffff;
text-transform: uppercase;
font-weight: bold;
font-size: 17px;
line-height: 15px;
margin: 0 0 0 0px;
}


#menu ul{
list-style-type: none;
padding: 0;
margin-left: 0;
}

div#menu li a
{
background:#fff
border:1px solid #fff;
margin: 0;
padding: 0;
display: block; 
}


-googlechromefix-
div#menu li:hover a {
background:#00ffff;
color:#FFFFFF;
border:1px solid #fff;
margin: 0;
padding: 0;
display: block;

}
div#menu ul a
{
text-decoration: none;
color: #333;
}
div#menu ul a:hover
{
background:#00ffff;
color:#FFFFFF;
font-weight:bold
}





div#page_content {
font-family: "Arial", "Helvetica", "Helvetica Neue";
font-size: 14px;
margin: 30px 0px 0 0;
text-align: left;
color: #333;
}
.color01 {
color: 
}
#desertshoredom2 {
display:  block;  
margin-left: auto;   
margin-right: auto;
text-align: center;
border: 1px solid red;
}

div#container2 {
display: block;   
margin-left: auto;   
margin-right: auto;
text-align: center;
}

</style>
</head>

<body>
<div id="site_title">
<center><span> &#x25B3;&#x25B2;desertshore&#x25B2;&#x25B3;</span></center>
<div id="site_title2">
<span>directory</span>

</div>
</div>

<div id="container">
<div id="menu">
<ul>
    <li><a href="happyanniversary"><span class="color01">Happy Anniversary</span> </a></li>
    <p><li><a href="downloads"><span class="color01">Downloads</span></a></li </p>
    <p><li><a href="about"><span class="color01">About</span></a></li></p>
    <p><li><a href="ask"><span class="color01">Ask</span></a></li></p>
</ul>
</div>

</div>
<p><img id="desertshoredom2" src="desertshoredom2.jpg"/></p>

<div id="container2">
<h1>+++test+++ Test +++test+++</h1>
<p> idreamed idreamed</p>
</div>
</body>

非常感谢您的帮助，这似乎很简单，我没有做，但是我在 HTML/CSS 方面的经验非常初级。

【问题讨论】：

标签： css image hover containers center

【解决方案1】：

你只需要更新下面的 CSS 块来添加position:absolute;

演示：http://jsfiddle.net/Jaybles/pzuRp/

div#container {
    width:100px;
    background:#FFF;
    height:auto;
    overflow:auto;    
    border: 1px solid black;
    border-left:0;
    float:left;
    position:absolute; 
}

【讨论】：

我认为修复了它，虽然它不是在菜单下工作，而是在#container 下工作。我知道这很简单，我预计会感到愚蠢，我在这里......非常感谢您的帮助！
在意识到问题后，我实际上删除了我的menu 答案并更新为container。再次查看链接。