中心只有一个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中的两个元素之一？

回答

相关问题