我想将下面的三个图标推向页面中心,同时仍保留响应式布局。
display: grid;
或display: row;
更合适吗?
根据您的回答,最干净的属性是什么?
<html>
<div id="contact">
<h1>Let's connect.</h1>
<div id="image-holder">
<div id="github-div">
<a href="https://github.com/klin-nj-97" target="_blank" id="profile-link">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github" class="contact-img">
</a>
</div>
<div id="linkedin-div">
<a href="https://www.linkedin.com/in/kevin-lin-33085a133/" target="_blank">
<img src="http://simpleicon.com/wp-content/uploads/linkedin.png" alt="linkedin" class="contact-img">
</a>
</div>
<div id="email-div">
<a href="mailto:kevin_lin@brown.edu">
<img src="https://image.freepik.com/free-icon/email-envelope-outline-shape-with-rounded-corners_318-49938.jpg" alt="email" class="contact-img">
</a>
</div>
</div>
</div>
</html>
<style>
#contact h1 {
text-align: center;
padding-top: 75px;
padding-bottom: 55px;
}
#image-holder {
display: flex;
flex-flow: row;
margin-left:
}
#contact a{
color: white;
}
.contact-img {
height: 35px;
width: 35px;
padding: 30px;
border-radius: 15px;
border: 2px solid black;
}
</style>
答案 0 :(得分:1)
您应该使用这个简单的技巧。
请将align-items: center; justify-content: center;
放入#image-holder
有关更多详细信息,请转到display:flex
希望获得帮助。
让我知道进一步的澄清。
#contact h1 {
text-align: center;
padding-top: 75px;
padding-bottom: 55px;
}
#image-holder {
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
}
#contact a{
color: white;
}
.contact-img {
height: 35px;
width: 35px;
padding: 30px;
border-radius: 15px;
border: 2px solid black;
}
<html>
<div id="contact">
<h1>Let's connect.</h1>
<div id="image-holder">
<div id="github-div">
<a href="https://github.com/klin-nj-97" target="_blank" id="profile-link">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github" class="contact-img">
</a>
</div>
<div id="linkedin-div">
<a href="https://www.linkedin.com/in/kevin-lin-33085a133/" target="_blank">
<img src="http://simpleicon.com/wp-content/uploads/linkedin.png" alt="linkedin" class="contact-img">
</a>
</div>
<div id="email-div">
<a href="mailto:kevin_lin@brown.edu">
<img src="https://image.freepik.com/free-icon/email-envelope-outline-shape-with-rounded-corners_318-49938.jpg" alt="email" class="contact-img">
</a>
</div>
</div>
</div>
</html>
答案 1 :(得分:0)
答案 2 :(得分:0)
最干净的方法是:
我已将您的HTML更改为使用基于类的选择器,而不是ID,例如class="contact"
而非id="contact"
:
<div class="contact">
<h1 class="contact__title">Let's connect.</h1>
<div class="contact__images">
<a class="contact__link" href="https://github.com/klin-nj-97" target="_blank">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github" class="contact__icon">
</a>
<a class="contact__link" href="https://www.linkedin.com/in/kevin-lin-33085a133/" target="_blank">
<img src="http://simpleicon.com/wp-content/uploads/linkedin.png" alt="linkedin" class="contact__icon">
</a>
<a class="contact__link" href="mailto:kevin_lin@brown.edu">
<img src="https://image.freepik.com/free-icon/email-envelope-outline-shape-with-rounded-corners_318-49938.jpg" alt="email" class="contact__icon">
</a>
</div>
</div>
对于最干净的CSS而言,理想的是所有选择器都具有相同的特异性级别,而最好的方法是仅使用基于类的选择器。这将使您更轻松地覆盖样式。您可以阅读有关CSS特殊性here的更多信息。
下面的CSS使用flexbox来相应地定位您的内容,假设您尝试将所有内容垂直放置在页面中:
body {
margin: 0; /* browser adds margins by default */
}
.contact {
display: flex;
flex-direction: column;
justify-content: center; /* centers your content horizontally */
align-items: center; /* centers your content vertically */
height: 100vh;
}
.contact__title {
margin: 0 0 55px; /* if you have a header you'd like to account for, the first value can be the header height */
}
.contact__images {
/* you don't even need anything here but the wrapping div of this classname is required to keep your icons aligned */
}
.contact__link {
text-decoration: none; /* proper way to hide the text link underline */
}
.contact__icon {
height: 35px;
width: 35px;
padding: 30px;
border-radius: 15px;
border: 2px solid black;
}
我使用的CSS类命名约定称为BEM。如果您对编写干净的CSS感兴趣,我建议阅读更多有关它的内容。您可以here或here来这样做。
我有一个有效的示例here on CodePen。您可以更改页面的高度以查看其垂直居中位置。