2017-05-09 12 views
0

クロムにヘッダーを配置する際に問題があります。 JSfiddleではうまく動作しますが、クロムにドロップするたびに、それは中心になりません。 andとalign-text:centerのようなブロック要素に対してmargin:0 autoを使ってみましたが、どれも動作していません。それがChromeで働いていない理由を ここに私のHTMLとCSSだGoogle chromeのh1要素のテキストを中央に配置できません

*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container, 
 
.grid { 
 
    margin: 0 auto; 
 
    width: 960px; 
 
} 
 

 
.container { 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 

 
.col-1-3 { 
 
    width: 33.33%; 
 
} 
 

 
.col-2-3 { 
 
    width: 66.66%; 
 
} 
 

 
.col-1-3 { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.grid, 
 
.col-1-3, 
 
.col-2-3 { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 

 

 
/* 
 
    ============================== 
 
    Primary Header 
 
    ============================== 
 
*/ 
 

 
.logo { 
 
    text-align: center; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Rysh</title> 
 
    <link rel="stylesheet" href="Assets/stylesheets/main.css"> 
 
</head> 
 

 
<body> 
 
    <header class="container logo"> 
 
    <h1>Rysh</h1> 
 
    <nav> 
 
     <a href="shop.html">Shop</a> 
 
     <a href="about.html">About</a> 
 
    </nav> 
 
    </header> 
 
</body> 
 

 
</html>

enter image description here

enter image description here

誰でも見ることができますか?

+0

あなたがリンクまたは我々はスクリーンショットであなたの問題を再現することができるものを提供することはできますか?それ以外の場合、根本的な原因を見つけることは不可能です。ところで、あなたはそれをより反応的にするために、固定の 'width:960px;'を削除する必要があります。 – shaochuancs

+0

コードスニペットでは、スタイルシート 'Assets/stylesheets/main.css'は相対パスであるためロードできません。 – shaochuancs

+0

@shaochuancsここでファイルを共有する方法を知っていますか?小さなフォルダです –

答えて

0

Rysh

または

Ryshを使用してみてください

または

Rysh

関連する問題