尽管.footer.links和.footer-links-names居中,但它们并不是完全对齐。我给了他们display:flex和justify-content:space-evenly;但是当我在浏览器中运行它们时,它们看起来并没有对齐。我希望徽标和链接完美对齐。我希望这是有道理的。
.footer {
margin-top: 0.5rem;
background-color: #696969;
}
.footer-links {
justify-content: space-evenly;
display: flex;
font-size: 3rem;
margin-top: 0.5rem;
}
.footer-links-names {
justify-content: space-evenly;
display: flex;
}
<link rel="stylesheet" type="text/css" href="psi.css" media="all">
<script src="https://use.fontawesome.com/82c7176f2a.js"></script>
<div class="footer">
<nav class="footer-links">
<a href="mailto:someone@yoursite.com" target="_blank"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
<a href="#link" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#link" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</nav>
<nav class="footer-links-names">
<a href="mailto:someone@yoursite.com" target="_blank">email@yahoo.com</a>
<a href="#link" target="_blank">Linkdn.com/profile</a>
<a href="#link" target="_blank">Github.com.com/profile</a>
</nav>
</div>
答案 0 :(得分:1)
您可以改善HTML的结构,以免重复使用PublishedPipelines
标签,而只需在每个<a>
中移动文本即可。
这将帮助您解决对齐问题,删除标记并提高可访问性。
footer-link
.footer {
margin-top: 0.5rem;
background-color: #696969;
}
.footer-links {
display: flex;
font-size: 3rem;
margin-top: 0.5rem;
}
.footer-link {
display: flex;
flex: 1 1 33.3%;
flex-direction: column;
align-items: center;
text-decoration: none;
}
.footer-link_text {
font-size: 1rem;
text-decoration: underline;
}
答案 1 :(得分:0)
为标签提供固定宽度
a{
width:100px;
display:flex;
justify-content:center;
}
.footer {
margin-top: 0.5rem;
background-color: #696969;
}
.footer-links {
justify-content: space-evenly;
display: flex;
font-size: 3rem;
margin-top: 0.5rem;
}
.footer-links-names {
justify-content: space-evenly;
display: flex;
}
a{
width:100px;
display:flex;
justify-content:center;
}
<link rel="stylesheet" type="text/css" href="psi.css" media="all">
<script src="https://use.fontawesome.com/82c7176f2a.js"></script>
<div class="footer">
<nav class="footer-links">
<a href="mailto:someone@yoursite.com" target="_blank"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
<a href="#link" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#link" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</nav>
<nav class="footer-links-names">
<a href="mailto:someone@yoursite.com" target="_blank">Email</a>
<a href="https://www.linkedin.com/" target="_blank">Linkdn</a>
<a href="https://github.com/" target="_blank">Github</a>
</nav>
</div>
答案 2 :(得分:0)
如果徽标和链接的宽度不同,则即使居中也无法将它们完美对齐。为了解决该问题,我建议创建三个跨越整个页面的div(每个div的宽度为33%),并将徽标和链接堆叠在每个div的中心。
.large-flex-container {
display: flex,
width: 100%
}
/* add CSS that centers the images and links within their respective divs */
<div class="large-flex-container">
<div>
<!-- insert first logo and link here -->
</div>
<div>
<!-- insert second logo and link here -->
</div>
<div>
<!-- insert third logo and link here -->
</div>
</div>
如果此代码不完美,请原谅;我有点着急。