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

时间:2018-08-31 04:29:27

标签: css

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

display: grid;display: row;更合适吗?

根据您的回答,最干净的属性是什么?

enter image description here

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

3 个答案:

答案 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)

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

按钮将居中。

下面的代码

JSFiddle

答案 2 :(得分:0)

最干净的方法是:

  1. 使用基于类的选择器代替ID选择器
  2. 使用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感兴趣,我建议阅读更多有关它的内容。您可以herehere来这样做。

我有一个有效的示例here on CodePen。您可以更改页面的高度以查看其垂直居中位置。