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>

편집 : 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을 가운데로 설정할 수 있습니다. 또한 업데이트 된 스 니펫을 추가했습니다. BTW, 당신은 다른 이유로 그들을 사용하지 않는 한 정당화 - 자기와 정렬 자기 필요가 없습니다.

.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

"main-header"안에 "head-content-container"라는 세로 및 가로 방향의 중심을 원합니다. – binarycycle

이 당신의 코드를 변경할 수 있습니다 . 희망이 도움이!

출처

2017-12-28 22:11:56 abidishajia

CSS 그리드 내부에 div를 중심에 넣기

답변

관련 문제