页脚中的图标

Question

我有一个包含四个图标的页脚，它们彼此重叠。我的目标是并排排列四个图标。我尝试了不同的方法，但没有任何效果。我要么将图标全部放在中间的一个点上，要么在底部的左侧，要么在一行中垂直放置。如果能得到一些帮助就好了！:)

<style>
    .i{
        margin: 50px;
    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: red;
        color: white;
        text-align: center;
        float: left;
    }
</style>
<body>
  <p class="container" div align="center" class = "i">
  <img src="static/website/media/profile.jpg" class="rounded-circle" alt="My image" width="254" height="186"></p>
  <p class = "i" div align="center">I am a 20 years old computer science student from Berlin. Let's go for a walk!</p>

  <div class = "footer">
      <p><img src="static/website/media/iconfinder_4691356_discord_icon.svg" alt="discord"></p>
      <p><img src="static/website/media/iconfinder_1964405_linkedin_logo_media_social_icon.svg" alt="discord"></p>
      <p><img src="static/website/media/iconfinder_4202766_email_gmail_mail_icon.svg" alt="gmail"></p>
      <p><img src="static/website/media/iconfinder_287723_goodreads_icon.svg" alt="goodreads"></p>
  </div>
</body>
</html>

Answer 1

将以下内容添加到您的 css 页脚 class:

display:flex;
flex-direction:row;

Answer 2

首先，如果“p”标签内只有一张图片，那么使用它是没有意义的。我删除了它们。

我们在页脚中创建了一个名为“.footer--icons”的新元素，并包含了所有图像。
下一步很简单，我们将元素设置为“display:flex”并将其并排对齐。

See: excellent article about flex-box

同样，对于“align-items”，我们将它们全部集中在“Y”轴上，对于“justify-content”，我们将它们全部集中在相对于父级的“X”轴。

.i {
  margin: 50px;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
  float: left;
}

.footer--icons {
  display: flex;
  align-items: flex-center;
  justify-content: center;
}

.footer--icons > img {
  margin: 5px;
}

<p class="container" div align="center" class="i">
  <img src="static/website/media/profile.jpg" class="rounded-circle" alt="My image" width="254" height="186"></p>
<p class="i" div align="center">I am a 20 years old computer science student from Berlin. Let's go for a walk!</p>

<div class="footer">
  <div class="footer--icons">
    <img src="static/website/media/iconfinder_4691356_discord_icon.svg" alt="discord">
    <img src="static/website/media/iconfinder_1964405_linkedin_logo_media_social_icon.svg" alt="discord">
    <img src="static/website/media/iconfinder_4202766_email_gmail_mail_icon.svg" alt="gmail">
    <img src="static/website/media/iconfinder_287723_goodreads_icon.svg" alt="goodreads">  
  </div>
</div>

Answer 3

只需使用 CSS flex-blox 和 .footer 作为容器。

.footer {
        display: flex;
        justify-content: center/flex-start;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: red;
        color: white;
        text-align: center;
        float: left;
}

使用 justify-content，您可以在父容器的中心或左侧控制弹性项目，这就是您想要的。

Answer 4

删除段落标签：

<div class = "footer">
      <img src="static/website/media/iconfinder_4691356_discord_icon.svg" alt="discord">
      <img src="static/website/media/iconfinder_1964405_linkedin_logo_media_social_icon.svg" alt="discord">
      <img src="static/website/media/iconfinder_4202766_email_gmail_mail_icon.svg" alt="gmail">
      <img src="static/website/media/iconfinder_287723_goodreads_icon.svg" alt="goodreads">
  </div>

然后将你的.footerclass修改为：

   .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: red;
        color: white;
        display: flex;
    }

要使图像居中，请将 justify-content: center 添加到页脚 class。要平均分配它们，请添加 justify-content: space-between.

关于 flexbox 的完整指南 (display: flex)，您可以查看这篇文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

页脚中的图标

Icons in footer

html

css

footer