Адаптивное расположение иконок

106

30 декабря 2020, 15:10

Я новичок в css, поэтому извиняюсь за простой вопрос. Имеется страница с иконками в столбик. По условию, расстояние между верхней границей браузера и верхней иконкой и расстояние между нижней границей браузера и нижней иконкой должны быть равны 15% от высоты экрана, а расстояние между остальными иконками должны быть равные. Как сделать так, чтобы расстояние в 15% от обеих границ и равные расстояния между иконками сохранялись на всех экранах. В частности проблема с большими мониторами. 15% сверху остается, но расстояние снизу гораздо больше.

  <body>
<style>
    .wrapper {
 float: right;
  top: 0%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 10%;
  display: inline-block;
 position: relative;
 justify-content: space-around;
}
.circle {
  width: 55px;
  height: 55px;
  line-height: 55px;
  background: #000;
  margin: 1em;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}
</style>
    <div class="wrapper" style="margin-left: 5%; margin-top:4.7%; ">
    <p style="margin-top: 10%"><a href="https://www.facebook.com"><div class="shrink"><div class="circle"><img style="margin-top: 10%" src="img/fb.png" width="80%" height="80%"  ></div></div></p>
    <p style="margin-top: 40%"><a href="https://twitter.com/"><div class="shrink"><div class="circle"><img style="margin-top: 10%" src="img/twitter.png" width="80%" height="80%"   ></div></div></p>
    <p style="margin-top: 40%"><a href="https://www.instagram.com/?utm_source=ig_profile_share&igshid=v7vcvy2xvgcs"><div class="shrink"><div class="circle"><img style="margin-top: 10%" src="img/instagram.png" width="80%" height="80%"  ></div></div></p>
    <p style="margin-top: 40%"><a href="https://www.youtube.com/channel/UC7TSohPBtJAnzzN9EnXIjDQ"><div class="shrink"><div class="circle"><img style="margin-top: 10%" src="img/youtube_alt.png" width="80%" height="80%"  ></div></div></p>
    <p style="margin-top: 40%"><a href="https://www.pinterest.ru/"><div class="shrink"><div class="circle"><img style="margin-top: 10%" src="img/vk.png" width="80%" height="80%"  ></div></div></p>
    <p style="margin-top: 40%; margin-bottom:4.7%;"><a href="https://tlgg.ru/"><div class="shrink"><div class="circle"><img style="margin-top: 10%" src="img/telegram.png" width="80%" height="80%"  ></div></div></p>
</div>
</body>

Answer 1

Попробуйте это:

.icons{
  padding-top: 15vh;
  padding-bottom: 15vh;
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

HTML:

<div class="icons">
  <a href="#" class="circle">
     <img src="https://image.flaticon.com/icons/svg/167/167756.svg" alt="icon">
  </a>
  <a href="#" class="circle">
     <img src="img/fb.png" alt="icon">
  </a>
  <!-- И так далее -->
</div>

Пример: https://jsfiddle.net/t2eqyf1o/