中间集成8张图片和logo的css和html答案

【问题标题】：Css and html integrating 8 images and logo in the middle中间集成8张图片和logo的css和html
【发布时间】：2017-12-05 12:40:32
【问题描述】：

我已经有一段 css/html 代码，它显示 4 张图片，每行 2 张，2 行，所有图片中间都有徽标。现在我需要以相同的格式在前 4 个图像的正下方添加另一组 4 个图像，中间有相同的徽标每个图像都添加了一些文本和一个链接，在将鼠标悬停在图像上时可见。我一直在努力完成但做不到。想知道你是否愿意帮助我。我的代码在这里 jsfiddle.net/Cristian_C/b9961995/1/

谢谢

我不知道如何在此处添加链接代码

【问题讨论】：

请提供一些代码。向我们展示您所做的一些工作。
嗨，克里斯，欢迎来到 SO。请查看此处以改进您的问题：stackoverflow.com/help/how-to-ask
请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决或您链接的站点无法访问，这个问题将对未来的访问者失去任何价值。发布 Minimal, Complete, and Verifiable example (MCVE) 来证明您的问题将帮助您获得更好的答案。有关详细信息，请参阅 Something on my web site doesn't work. Can I just paste a link to it? 谢谢！
@j08691 真的很抱歉，我现在添加了一个小提琴而不是实时链接。小提琴将无限期保持在线。
您的minimal reproducible example 需要存在在您的问题中，而不是在其他网站上

标签： html css image alignment

【解决方案1】：

我不完全确定你为什么将内联样式与样式表混合，但你应该（通常）避免它，因为它会使你的 CSS 维护成为一场噩梦（分离也使 DOM 对你来说更具可读性，也）。

由于代码膨胀，我不确定您是否有对标记必不可少的重要样式；但是，使用z-index、float 和clear 有一个简单的方法来实现您想要做的事情。

见我的demo fiddle。

【讨论】：

感谢您的帮助。它在小提琴上看起来很棒，但是当我将它添加到我的服务器时，它显示 2 行，每行 4 张图像，并且“徽标”位于该行中的最后一张图像之上。不幸的是，我需要小提琴中的代码，因为每个图像上都有一个图层以及一些文本和链接，当您将鼠标悬停在每个图像上时会出现。