Question

我想将下面的三个图标推向页面中心，同时仍保留响应式布局。

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>

Answer 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>

Answer 2

将属性justify-content: center;添加到#image-holder ID中。

按钮将居中。

下面的代码

JSFiddle

Answer 3

最干净的方法是：

使用基于类的选择器代替ID选择器
使用flexbox将布局（和文本）水平居中放置，并将布局垂直居中

我已将您的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。您可以更改页面的高度以查看其垂直居中位置。

在保持响应式设计的同时使图像居中

3 个答案: