CSSグリッドの内側にdivを配置する

私はHTML/CSS/JSを書くことを学んでいます。私はCSS Gridに取り掛かり始め、グリッドボックス内のアイテムを水平方向と垂直方向に整列させるのに苦労しています。グリッドはレイアウトを作成するのに非常に強力で、何らかの理由で私はこの部分を理解できません。私はhead-content-containerをヘッダの中央に配置したいと思う。CSSグリッドの内側にdivを配置する

研究中私はTHISウェブサイトとTHISを見つけました。私は彼らがjustify-self：center;そして、align-self：center;何らかの理由で私はそれを働かせることができません。私が理解していない別の問題がある可能性もあります。 Hereは私のgithub repoへのリンクであり、以下は私のコードのスニペットです。あなたが私に与えることができるすべての助けをありがとうございます。

 <body> 
     <nav class="main-nav-wrapper"> 
      <div class="nav-logo-wrapper"> 
       <img class="nav-logo" src="img\T-Portfolio_Logo-02.svg" alt="Bolt Development Logo"> 
      </div>  
     </nav> 
     <div class="grid-wrapper"> 
      <header class="main-header"> 
       <div class="head-content-container"> 
        <h1>Bolt Development</h1> 
       </div> 
      </header> 
     </div> 
    </body>

EDIT：HTMLスニペットを追加していません。

.grid-wrapper { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: 500px 500px 500px 500px 200px; 
    grid-template-areas: "head head head" 
         "main main main" 
         "portfolio_1 portfolio_2 portfolio_3" 
         "portfolio_4 portfolio_5 portfolio_6" 
         "footer footer footer"; 
} 

.main-header { 
    grid-area: head; 
    background-image: url(https://placeimg.com/1000/800/tech); 
    background-size: cover; 
    grid-column: 1/4; 
    color: white; 
} 

.main-nav-wrapper { 
    display: grid; 
    grid-template-columns: repeat(8, 1fr); 
    height: 100px; 
    background-color: #191919; 
} 

.nav-logo-wrapper { 
    grid-column: 1/2; 
    padding: .5em; 
    max-height: 100%; 
} 

.nav-logo { 
    max-height: 100%; 
} 

.head-content-container { 
    grid-area: head; 
    align-self: center; 
    justify-self: center; 
    width: 50%; 
}

出典

2017-12-28 binarycycle

こんにちは、提供されたCSSに添付されているHTMLスニペットは、より良い返答を得るのに役立ちます。 –

追加されました。ありがとうございました。 – binarycycle

私自身の質問を理解することができました。フレックスを表示し、コンテンツを整列させるためにヘッダーを設定しました。

.main-header { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-image: url(https://placeimg.com/1000/800/tech); 
    background-size: cover; 
    grid-column: 1/4; 
    color: white; 
}

出典

2017-12-28 23:57:09 binarycycle

margin autoを使用し、text-alignを以下のように中央に設定できます。私はまた、最新のスニペットを追加しました。あなたが他の何らかの理由でそれらを使用していない限り、あなたは正当化する必要はありません。

.head-content-container { 
    grid-area: head; 
    **text-align: center;** 
}

それとも、本当に50％の幅を与えたいならば、あなたもそれをmargin: 0 autoを追加することができます：あなたはこのようにコードを変更することができ

.head-content-container { 
    grid-area: head; 
    align-self: center; 
    justify-self: center; 
    width: 50%; 
    margin: auto; 
    text-align: center; 
}

.grid-wrapper { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
    grid-template-rows: 500px 500px 500px 500px 200px; 
 
    grid-template-areas: "head head head" 
 
         "main main main" 
 
         "portfolio_1 portfolio_2 portfolio_3" 
 
         "portfolio_4 portfolio_5 portfolio_6" 
 
         "footer footer footer"; 
 
} 
 

 
.main-header { 
 
    grid-area: head; 
 
    background-image: url(https://placeimg.com/1000/800/tech); 
 
    background-size: cover; 
 
    grid-column: 1/4; 
 
    color: white; 
 
} 
 

 
.main-nav-wrapper { 
 
    display: grid; 
 
    grid-template-columns: repeat(8, 1fr); 
 
    height: 100px; 
 
    background-color: #191919; 
 
} 
 

 
.nav-logo-wrapper { 
 
    grid-column: 1/2; 
 
    padding: .5em; 
 
    max-height: 100%; 
 
} 
 

 
.nav-logo { 
 
    max-height: 100%; 
 
} 
 

 
.head-content-container { 
 
    grid-area: head; 
 
    align-self: center; 
 
    justify-self: center; 
 
    width: 50%; 
 
    margin: auto; 
 
    text-align: center; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<body> 
 
     <nav class="main-nav-wrapper"> 
 
      <div class="nav-logo-wrapper"> 
 
       <img class="nav-logo" src="img\T-Portfolio_Logo-02.svg" alt="Bolt Development Logo"> 
 
      </div>  
 
     </nav> 
 
     <div class="grid-wrapper"> 
 
      <header class="main-header"> 
 
       <div class="head-content-container"> 
 
        <h1>Bolt Development</h1> 
 
       </div> 
 
      </header> 
 
     </div> 
 
    </body>

出典

2017-12-28 21:48:47 orabis

ありがとうございます。私はそれを中心にどのように垂直に整列させるでしょうか？ – binarycycle

ボルト・デベロップはどれですか？あなたはそれを何に対して垂直に整列させたいのですか？コンテナ全体は画面のほぼ中央に配置されるでしょうか？ – orabis

私は、 "メインヘッダー"内の "ヘッドコンテンツコンテナ"を縦横にセンターにしたいと思います。 – binarycycle

。お役に立てれば！

出典

2017-12-28 22:11:56 abidishajia

CSSグリッドの内側にdivを配置する

答えて

関連する問題