中心只有一個div中的兩個元素之一？

我有一個簡單的網頁，其中有一個.topnav酒吧和一個.container，其中有幾個元素。我正在嘗試將.container（而不是.topnav）居中放置在頁面的body之內，以便它將垂直居中。然而，當我嘗試過的造型body有：中心只有一個div中的兩個元素之一？

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

無論是.topbar和.container居中。我如何去垂直集中.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

由於您不想在導航欄上使用Flexbox行爲，因此最簡單的解決方案可能不是將導航欄放入Flexbox中。 –

它看起來不像導航欄在彈性盒中。只有'.container'被設置爲'display：flex'。我很困惑。 – showdev

啊，你是對的@showdev。我也很困惑 - Nezdiro能否請你澄清你在問什麼？你在這裏發佈的代碼片段與你的描述不符...... –

喜在頁面中間垂直對齊，置容器的高度爲100％視口：

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

來源

2017-10-20 20:10:13 Federico

我喜歡這個答案！唯一的問題是，現在整個身體都比視口的高度大，所以當我在導航欄下方向下滾動時，框僅顯示居中。導航欄的高度是68px，我試着將'.container'的頂部設置爲'-68px'，但這似乎沒有影響任何東西。 – nezdiro

我想我看到你要找的東西：
標題在頁面頂部和身體下方，身體內容垂直居中。

有以下我的示例中爲三個柔性系統：

第一設置<body>作爲垂直柔性容器兩個項目：.topnav和.container。這些物品在justify-content: flex-start（這是默認情況下）和flex被允許增長以填充柔性容器flex-grow:1。

第二個將.container設置爲垂直柔性容器，每個.row作爲一個項目。項目分別垂直和水平居中，分別爲justify-content: center和align-items: center。

第三個設置.row元素作爲水平柔性容器（flex-direction: 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中的兩個元素之一？

回答

相關問題