爲什麼我的導航欄會影響圖像的居中？

如果我然後添加我的導航欄（使用無序列表水平列表），那麼我的圖像更靠近頁面的左側。

這只是一個基本的佈局

<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

爲什麼我的導航欄會影響圖像的居中？

回答

相關問題