Question

我有以下HTML：

<div class="row">
    <div class="col-md-10 social-icons">
        <a href="https://www.youtube.com/" target="_blank"><img src="/images/youtube-i.png"></a>
        <a href="https://github.com/" target="_blank"><img src="/images/github-i.png"></a>
        <a href="https://twitter.com/" target="_blank"><img src="/images/twitter-i.png"></a>
        <a href="https://www.facebook.com/" target="_blank"><img src="/images/facebook-i.png"></a>
        <a href="https://t.me/" target="_blank"><img src="/images/telegram-i.png"></a>
        <a href="https://medium.com/" target="_blank"><img src="/images/m-icn.png"></a>
    </div>
</div>

我正在尝试“合理对齐”所有社交图标。图标在“ social-icons”“ div”上使用“ text-center”类居中对齐，反之亦然，但“ text-justify”类不起作用。

CSS：

.social-icons img{
    margin-right: 7px;
}
.social-icons{
    margin-bottom: 14px;
}
.social-icons a{
    display:block;
    width: 16.66%;
    float:left;
    text-align:center;
}
.social-icons img:last-child{
    margin-right: 0px;
}
.notify-section .social-icons img{
    width: 40px;
}

任何人都可以帮助或协助达到所需的结果吗？ https://www.screencast.com/t/fjePINOiv

Answer 1

您需要text-align-last: justify;

.justify-links{
  text-align-last: justify;
}

<div class="justify-links">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

Answer 2

您只需使用justify-content: space-between;即可获得与flex相等的空间。尝试使用此代码段作为参考。

.justify-links{
  display: flex;
  justify-content: space-between;
}

<div class="justify-links">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

在HTML <div>内对齐对齐锚点

2 个答案: