Css 导航会使图像偏离中心
我已经在这方面工作了一段时间，但似乎无法自己解决问题，也无法在任何地方找到答案 基本上，我的图像左侧有一个垂直导航条，因此图像不是从浏览器窗口的完全左侧居中到右侧，而是从导航条的右侧居中到浏览器窗口的右侧。这与我的标题“沙漠海岸”和我的页面内容无关，两者实际上都是居中的 有没有一种方法可以让它看到通过导航栏并围绕浏览器窗口居中 代码如下：Css 导航会使图像偏离中心,css,image,hover,containers,center,Css,Image,Hover,Containers,Center,我已经在这方面工作了一段时间，但似乎无法自己解决问题，也无法在任何地方找到答案 基本上，我的图像左侧有一个垂直导航条，因此图像不是从浏览器窗口的完全左侧居中到右侧，而是从导航条的右侧居中到浏览器窗口的右侧。这与我的标题“沙漠海岸”和我的页面内容无关，两者实际上都是居中的 有没有一种方法可以让它看到通过导航栏并围绕浏览器窗口居中 代码如下： <html> <head> <title>dir</title> <style type="text/
<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> △▲desertshore▲△</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>
迪尔
身体{
字体系列：“Arial”、“Helvetica”、“Helvetica Neue”；
字体大小：14px；
背景图片：url（'.jpg'）；
背景位置：中心；
背景尺寸：50em；
背景重复：无重复；
利润率：30px0px0；
文本对齐：左对齐；
颜色：#333；
}
头衔{
字体系列：“Arial”、“Helvetica”、“Helvetica Neue”；
字体大小：14px；
背景图片：url（'.jpg'）；
背景位置：中心；
背景尺寸：50em；
背景重复：无重复；
利润率：30px0px0；
文本对齐：左对齐；
颜色：#333；
}
分区#集装箱{
宽度：100px；
背景：#FFF；
高度：自动；
溢出：自动；
边框：1px纯黑；
左边框：0；
浮动：左；
}
分区#场地#名称{
颜色：#00ffff；
文本转换：小写；
字号：；
字体大小：35px；
线高：15px；
利润率：0像素；
}
分区#场地#标题2{
颜色：#00ffff；
文本转换：大写；
字体大小：粗体；
字号：17px；
线高：15px；
利润率：0像素；
}
#菜单ul{
列表样式类型：无；
填充：0；
左边距：0；
}
div#菜单李a
{
背景：#fff
边框：1px实心#fff；
保证金：0；
填充：0；
显示：块；
}
-谷歌Chromefix-
div#menu li:将鼠标悬停在a上{
背景：#00ffff；
颜色：#FFFFFF；
边框：1px实心#fff；
保证金：0；
填充：0；
显示：块；
}
分区菜单ul a
{
文字装饰：无；
颜色：#333；
}
div#菜单ul a：悬停
{
背景：#00ffff；
颜色：#FFFFFF；
字体大小：粗体
}
第页内容{
字体系列：“Arial”、“Helvetica”、“Helvetica Neue”；
字体大小：14px；
利润率：30px0px0；
文本对齐：左对齐；
颜色：#333；
}
.color01{
颜色：
}
#沙漠地带2{
显示：块；
左边距：自动；
右边距：自动；
文本对齐：居中；
边框：1px纯红；
}
货柜组2{
显示：块；
左边距：自动；
右边距：自动；
文本对齐：居中；
}
△▲；沙漠海岸▲△；
目录
- 您只需更新以下CSS块即可添加
位置：绝对
演示：
我想这已经解决了，虽然它不是在菜单下工作，而是在容器下工作。我知道这是件简单的事情，我期待着感觉自己很愚蠢，而现在我。。。非常感谢你的帮助！在意识到这个问题后，我实际上删除了我的菜单
答案，并用容器
进行了更新。再次查看链接。
div#container {
width:100px;
background:#FFF;
height:auto;
overflow:auto;
border: 1px solid black;
border-left:0;
float:left;
position:absolute;
}