Question

我一直在研究这个问题，似乎无法自己解决问题或在任何地方找到答案。

基本上发生了什么，我的图像左侧有一个垂直导航栏，所以不是图像从浏览器窗口的完全左侧居中到右侧，而是从右侧居中导航栏的一侧到浏览器窗口的右侧。这就是我的标题“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方面的经验非常简单。

Answer 1

您只需更新以下CSS Block即可添加position:absolute;

DEMO：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; 
}

导航将图像偏离中心

1 个答案: