gpt4 book ai didi

html - 仅居中 div 中的两个元素之一?

转载 作者:搜寻专家 更新时间:2023-10-31 08:14:06 26 4
gpt4 key购买 nike

<分区>

我有一个简单的网页,其中包含一个 .topnav 栏和一个包含一些元素的 .container。我试图在页面的 body 中仅将 .container 居中,而不是 .topnav,以便它垂直居中。但是,当我尝试使用以下样式设置 body 时:

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>

现在是这样的:

enter image description here

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com