1
もし私がナビゲーションバーを持っていなければ、私のイメージはうまくセンタリングされます。ナビゲーションバーが画像のセンタリングに影響するのはなぜですか？
次に、（並べ替えられていないリストの水平リストを使用して）ナビゲーションバーを追加すると、画像がページの左端に配置されます。
それはここだけの基本的なレイアウト
<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>
私の画面は2,560です。フルスクリーンでは問題があるようですが、フルスクリーンではない場合、正しくセンタリングされていないナビゲーションバーのように見えます – oneman
これが役立つかどうかを確認してください - https://jsfiddle.net/ps84wbx0/1/ –
@DmitriyDemirはい、ナビゲーションバーと画像を正しく整列させましたが、両方とも完全に左に揃えました。私は両方の周りにコンテナを入れて、次にコンテナを中心にすべきですか？ – oneman