为什么我的导航栏会影响图像的居中？

如果我然后添加我的导航栏（使用无序列表水平列表），那么我的图像更靠近页面的左侧。

这只是一个基本的布局

<div> 
<img ...> 
<ul>....</ul> 
</div>

下面是完整的代码（这是不是很多，但它仍然太多，张贴在这里的） https://jsfiddle.net/ps84wbx0/

不幸的是我不能添加图像，但我相信任何图像的情况都是一样的。

这是我想创建

这里页面的一个片段：

/* Logo Styling */ 
 
div.homepage { 
 
    position: fixed; 
 
    left: 50%; 
 
} 
 

 
img.homepage { 
 
    position: relative; 
 
    left: -50%; 
 
} 
 

 

 
/*Nav Bar Styling*/ 
 
ul { 
 
    list-style-type: none; 
 
    margin-left: -50%; 
 
} 
 

 
li.button { 
 
    display: inline-block; 
 
    margin: 0 1em 1em 0; 
 
    padding: 0 4em; 
 
    font: 300 1.5em/3em 'Open Sans', sans-serif; 
 
    letter-spacing: .08em; 
 
    color: #fff; 
 
    background: #0090C0; 
 
    border-radius: 2px; 
 
} 
 

 
li.button:hover{ 
 
    background: #007DA7; 
 
    box-shadow: 0 0 3px rgba(black, .5) inset; 
 
} 
 
    
 
a:link, a:hover, a:active, a:visited { 
 
    text-decoration: none; 
 
    color: inherit; 
 
}

<div class="homepage"> 
 
    <img src="images/homepage.png" class="homepage"> 
 
    <ul> 
 
     <li class="button"><a href="index.html" data-text="Home">Home</a></li> 
 
     <li class="button"><a href="about.html" data-text="About">About</a></li> 
 
     <li class="button"><a href="services.html" data-text="Services">Services</a></li> 
 
     <li class="button"><a href="contact.html" data-text="Contact">Contact</a></li> 
 
    </ul> 
 
</div>

来源

2016-11-06 oneman

我的屏幕是2560×1440，如果有差别。这似乎是一个问题，当它的全屏，但是当它不是全屏，它看起来像它的导航栏不正确居中 – oneman

检查是否有帮助 - https://jsfiddle.net/ps84wbx0/1/ –

@DmitriyDemir是的，正确对齐导航栏和图像，但现在它们都完全对齐左侧。我应该在两边放一个容器，然后将容器居中？ – oneman

有多种方式来解决这个问题，但我认为这一个是其中一个最简单。我只更改了div.homepage,img.homepage和ul的CSS。下面的代码：

/* Logo Styling */ 
 
div.homepage { 
 
    position: fixed; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
img.homepage { 
 
    position: relative; 
 
} 
 

 

 
/*Nav Bar Styling*/ 
 
ul { 
 
    list-style-type: none; 
 
} 
 

 
li.button { 
 
    display: inline-block; 
 
    margin: 0 1em 1em 0; 
 
    padding: 0 4em; 
 
    font: 300 1.5em/3em 'Open Sans', sans-serif; 
 
    letter-spacing: .08em; 
 
    color: #fff; 
 
    background: #0090C0; 
 
    border-radius: 2px; 
 
} 
 

 
li.button:hover{ 
 
    background: #007DA7; 
 
    box-shadow: 0 0 3px rgba(black, .5) inset; 
 
} 
 
    
 
a:link, a:hover, a:active, a:visited { 
 
    text-decoration: none; 
 
    color: inherit; 
 
}

<div class="homepage"> 
 
    <img src="images/homepage.png" class="homepage"> 
 
    <ul> 
 
     <li class="button"><a href="index.html" data-text="Home">Home</a></li> 
 
     <li class="button"><a href="about.html" data-text="About">About</a></li> 
 
     <li class="button"><a href="services.html" data-text="Services">Services</a></li> 
 
     <li class="button"><a href="contact.html" data-text="Contact">Contact</a></li> 
 
    </ul> 
 
</div>

来源

2016-11-06 08:43:23

为什么我的导航栏会影响图像的居中？

回答

相关问题