div의 두 요소 중 하나만 가운데에 맞 춥니 다?

나는 약간의 요소가있는 .topnav 바와 .container의 간단한 웹 페이지를 가지고 있습니다. 페이지의 body 내에 .container이 아닌 .topnav을 중심에 놓으려고하므로 세로로 가운데에 정렬됩니다.div의 두 요소 중 하나만 가운데에 맞 춥니 다?

display:flex; 
align-items:center; 
justify-content:center;

모두 .topbar 및 .container이 집중되어 : 그러나, 나는과 스타일 body을 시도했습니다 때. .container을 세로로 가운데에 배치하려면 어떻게해야합니까? 여기

body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
.contact_box { 
 
    text-align: center; 
 
    background-color: red; 
 
    border: 1px solid #c0c0c0; 
 
    border-radius: 5px; 
 
    height: 20em; 
 
    width: 25em; 
 
    box-shadow: 1px 1px 6px #757677; 
 
    float: left; 
 
} 
 

 
.contact_box img { 
 
    margin-top: 3.3em; 
 
    margin-bottom: 1.2em; 
 
    height: 3em; 
 
    width: 3em; 
 
} 
 

 
.contact_box h3 { 
 
    color: #6d6d6d; 
 
} 
 

 
#contact .container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<body id="contact"> 
 
    <div class="topnav" id="myTopnav"> 
 
    <a href="index.html">Home</a> 
 
    <a href="about.html">About</a> 
 
    <a href="#" class="selected">Contact</a> 
 
    <a class="icon" onclick="myFunction()">&#9776;</a> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="row" id="contact_section"> 
 
     <div class="contact_box" class="col-md-4"> 
 
     <a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" alt="Github"></a> 
 
     <br> 
 
     <h3>GitHub</h3> 
 
     </div> 
 

 
     <div class="contact_box" class="col-md-4"> 
 
     <a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" alt="LinkedIn"></a> 
 
     <h3>LinkedIn</h3> 
 
     </div> 
 

 
     <div class="contact_box" class="col-md-4"> 
 
     <img src="resources/email_icon.png" alt="EMAIL"> 
 
     <h3>Email</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

이 지금 보이는 방법은 다음과 같습니다

출처

2017-10-20 nezdiro

네비게이션 바에서 플렉스 박스 동작을 원하지 않으므로, 가장 간단한 해결책은 아마 네비게이션 바를 플렉스 박스에 넣지 않는 것입니다. –

네비게이션 바가 플렉스 박스에있는 것처럼 보이지 않습니다. '.container' 만'display : flex'로 설정됩니다. 나는 혼란스러워. – showdev

아, 당신 말이 맞아요 @ showdev. 나도 혼란 스럽네 - 네즈 디로는 네가 묻고있는 것을 분명히 해줄 수 있니?여기에 게시 한 코드 스 니펫이 잘못된 정보에 대한 설명과 일치하지 않습니다. –

안녕 페이지의 중앙에 수직으로 정렬, 100 %로 컨테이너의 높이를 설정 뷰포트의 :

#contact .container { 
    height:100vh; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
}

출처

2017-10-20 20:10:13 Federico

나는이 대답을 좋아한다! 유일한 문제는 이제 몸 전체가 뷰포트의 높이보다 크기 때문에 Navbar 아래로 스크롤 할 때 상자가 가운데에 표시됩니다. navbar의 높이는 68px이고'.container'의 꼭대기를'-68px'로 설정하려고 시도했지만, 이것은 아무런 영향을 미치지 않습니다. – nezdiro

나는 당신이 찾고있는 것을 보았다고 생각한다 :
아래쪽의 페이지와 몸체의 머리 부분, 몸통의 내용이 세로로 가운데에있다.

아래에있는 내 예제에서 세 플렉스 시스템이 있습니다 : 두 항목 최대 <body> 수직 플렉스 컨테이너로

첫 번째 세트 : .topnav와 .container가. 항목은 flex 컨테이너 시작 부분에 맞춰서 justify-content: flex-start (기본값 임)이되고 .container은 flex 컨테이너를 채우기 위해 flex-grow:1으로 커질 수 있습니다.

두 번째는 .row을 항목으로 사용하여 세로 플렉스 컨테이너로 .container을 설정합니다. 항목의 가로 및 세로 중심은 justify-content: center 및 align-items: center입니다.

세 번째 요소는 가로 플렉스 컨테이너 (flex-direction: row이 기본값 임)로 .row 요소를 설정하고 각각 .contact_box을 항목으로 설정합니다. 항목의 가로 방향 중심은 justify-content: center입니다.

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-start; 
 
} 
 

 
.container { 
 
    flex-grow: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
} 
 

 
.contact_box { 
 
    background-color: red; 
 
    border: 1px solid #c0c0c0; 
 
    border-radius: .5em; 
 
    box-shadow: 1px 1px 6px #757677; 
 
    padding: 1em 2em; 
 
    text-align: center; 
 
} 
 

 
.contact_box h3 { 
 
    margin: .25em 0 0; 
 
}

<div class="topnav"> 
 
    <a href="#">Home</a> 
 
    <a href="#">About</a> 
 
    <a href="#" class="selected">Contact</a> 
 
    <a class="icon">&#9776;</a> 
 
</div> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 

 
    <div class="contact_box"> 
 
     <a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" alt="Github"></a> 
 
     <br> 
 
     <h3>GitHub</h3> 
 
    </div> 
 

 
    <div class="contact_box"> 
 
     <a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" alt="LinkedIn"></a> 
 
     <h3>LinkedIn</h3> 
 
    </div> 
 

 
    <div class="contact_box"> 
 
     <img src="resources/email_icon.png" alt="EMAIL"> 
 
     <h3>Email</h3> 
 
    </div> 
 

 
    </div> 
 

 
</div>

이 같이

, 각 플렉스 시스템과 다른 색상 :

그리고 다른 .row를 추가 한 경우, 그것은 다음과 같습니다

출처

2017-10-20 20:24:42 showdev

div의 두 요소 중 하나만 가운데에 맞 춥니 다?

답변

관련 문제