css 我的社交图标与上面的内容不一致

fsi0uk1n  于 2023-06-25  发布在  其他
关注(0)|答案(2)|浏览(140)

我在这里试过一些方法。我在它自己的ul类中创建了内容,我在hero_text div中尝试了它,我使用了下面的第一个片段,我还探索了其他flexbox justify-content和align项。我已经看过了任何错误的margin-left代码,但我没有发现任何看起来像是影响这一点的东西。
我最初在页脚中有这些社交链接,这个问题一直存在。我以为在另一个领域尝试它,我可以尝试找到问题并解决它,但我一直没能弄清楚。

.
mbskvtky

mbskvtky1#

我分析了所有这些和其他代码,这些代码也存在于你的github帐户上。只有一行代码丢失了:

<!--footer-->
<aside> 
        <footer> 
      <ul class="social-media"> 
        <li><a href="https://www.linkedin.com/in/vicdearanzeta" target="_blank"><img src="Logo/mdi_linkedin.svg" width="32px" height="32px" class="linkedin" alt="linkedin"></a></li>
        <li><a href="https://github.com/vdaranze" target="_blank"><img src="Logo/mdi_github.svg" width="32px" height="32px" class="github" alt="github"></a></li>
        <li><a href="https://www.artstation.com/vicdearanzeta" target="_blank"><img src="Logo/mdi_artstation.svg" width="32px" height="32px" class="artstation" alt="artstation"></a></li>
      </ul>
   <p class="copyright">&copy;2023 Vic de Aranzeta</p>
</footer>
</aside>

在html文件中,我只是在ul class ="social-media"中添加了一个类,然后我在上面应用了CSS。在CSS文件中添加的代码如下:

.social-media{
    display: flex;
    /* border: 5px solid white; */
    justify-content: center;
}

这将解决您的图标对齐问题。

.copyright{
    text-align: center;
}

如果你想让这行代码(写在下面)以图标为中心,你也可以添加这行代码。

enter code here
<p class="copyright">&copy;2023 Vic de Aranzeta</p>
    • 最终结果图片:**

qmb5sa22

qmb5sa222#

罪魁祸首是填充物。用户代理样式表(也称为浏览器默认样式表)包括ulpadding-inline-start: 40px声明
另外,不要忘记使用list-style-type: none删除列表标记

.hero_text ul {
  display: flex;
  padding: 0;
  list-style-type: none;
}
<div class="hero_text">
    <p class="name">Kaixo! I'm Vic de Aranzeta. </p>
    <p> A Design Anthropologist, User Experience Designer, Photographer, and Illustrator based in <s>sunny</s> foggy San Francisco.
    I'm a Principal Product Designer by day - Outside of work you can find me snapping photos on my Fujifilm X-T30II, playing video games, or reading a book.
Check out my <u><a href="https://www.vicdearanzeta.com" class="link">design portfolio</a></u> to see more work. This website is to practice front-end web development.</p>
   <ul> 
    <li><a href="https://www.linkedin.com/in/vicdearanzeta" target="_blank"><img src="Logo/mdi_linkedin.svg" width="32px" height="32px" class="linkedin" alt="linkedin"></a></li>
    <li><a href="https://github.com/vdaranze" target="_blank"><img src="Logo/mdi_github.svg" width="32px" height="32px" class="github" alt="github"></a></li>
    <li><a href="https://www.artstation.com/vicdearanzeta" target="_blank"><img src="Logo/mdi_artstation.svg" width="32px" height="32px" class="artstation" alt="artstation"></a></li>
  </ul>
</div>

相关问题