ナビゲーションバーの中央に表示されないのはなぜですか？

Question

私はコードを持っていますthere 私の質問は、なぜ異なるページのボタンが中央にないのですか？これは、サイトが最小限に抑えられている場合にはより明らかです。

nav.stroke ul li a,  
nav.fill ul li a {  
position: relative; 
} 
nav.stroke ul li a:after, 
nav.fill ul li a:after { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 0%; 
    content: '.'; 
    color: transparent; 
    background: #aaa; 
    height: 1px; 
} 
nav.stroke ul li a:hover:after { 
    width: 100%; 
} 

nav.fill ul li a { 
    transition: all 2s; 
} 

nav.fill ul li a:after { 
    text-align: left; 
content: '.'; 
margin: 0; 
    opacity: 0; 
} 
nav.fill ul li a:hover { 
    color: #fff; 
    z-index: 1; 
} 
nav.fill ul li a:hover:after { 
    z-index: -10; 
    animation: fill 1s forwards; 
-webkit-animation: fill 1s forwards; 
    -moz-animation: fill 1s forwards; 
    opacity: 1; 
} 

h1,h3 { 
    text-align: center; 
    color: white; 
} 
li{ 
    list-style-position: inside; 
    display: inline; 
    padding-left: 12px; 
} 

a{ 
padding: .2em .1em; 
color:grey; 
    background-color: ; 
} 


} 
.xy{ 
    margin-top: 75px; 
} 
h1{ 
    font-size: 45px; 
} 
h3{ 
    font-size: 23px; 
} 
body{ 
    background-color: #451255; 
} 
nav { 
    width: 70%; 
    margin: 0 auto; 
    background: #fff; 
    padding: 15px; 
    box-shadow: 0px 5px 0px #dedede; 
    position: center; 
} 
nav ul { 
    list-style: none; 
    text-align: center; 
} 
nav ul li { 
    display: inline-block; 
} 
nav ul li a { 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
    color: #aaa; 
    font-weight: 800; 
    text-transform: uppercase; 
    margin: 0 10px; 

} 
nav ul li a, 
nav ul li a:after, 
nav ul li a:before { 
    transition: all .5s; 
} 
nav ul li a:hover { 
    color: #555; 
} 

@-webkit-keyframes fill { 
    0% { 
    width: 0%; 
    height: 1px; 
    } 
    50% { 
    width: 100%; 
    height: 1px; 
    } 
    100% { 
    width: 100%; 
    height: 100%; 
    background: #451255; 
    } 
} 
.btns, 
.fill{ 
    margin: auto; 
    position: center; 
    display: block; 
} 

だから、私はそのコードを持っています。あなたはリンク上にどのように見えるかを見ることができます。私の問題は、それが中心にないということです。それを最小限にすると、それが中心にないという事実がより明らかになります。どうすればそれを修正できますか？

Answer 1

@junkfoodjunkieのように、すでに述べたように、基本的なCSSリセットです。 なぜですか？あなたが見ることができるように、あなたのメニューの項目（青い部分）がすでに集中している

いますが、初期-webkit-padding-start: 40px;（緑の部分）を持っていると、それは同じ操作を行います：要素が、これは何が起こっているかで、初期のCSSのセットを得ましたpadding-left: 40px;の場合は、メニューから40px以上は必要ですので、メニューの項目が中央にない/右に固定されているように見えるので、それを修正するには<ul>要素の値を上書きする必要があります。 <li>の要素をpadding-left: 12px;に設定すると、メニュー項目が完全に中央に配置されないようになります。 CSS resetを使用しない場合は、.fill > ul {padding-left: 0;}をCSSに追加してください。

Answer 2

あなたは

margin-left: auto; margin-right: auto; text-align: center; 

を使用して、より良い運を持っているかもしれません。また、何も任意の時点で、右には何もプッシュされていないことを確認してください。

Answer 3

デフォルトの動作をリセットまたは削除していません。 <ul>にはmarginまたはpaddingが定義されておらず、最初にCSSをリセットしていないため、デフォルトの埋め込みと余白が表示されます。あなたの<ul>にmargin: 0; padding: 0;を入れればうまくいくはずです。スタイルシートの先頭にhttps://jsfiddle.net/efv8x1x2/1/

追加

* { 
margin: 0; 
padding: 0; 
} 

、出来上がり、センタリング：

かは、単にフル残忍なリセットを行います。