html - 对齐网页上的复杂图像

Question

在 HTML 网页上定位和对齐图像的最佳方式是什么？

我将有大约 10 个用户控件，每个控件上都有一组以特定模式排列的图像，例如 - 圆弧、圆、直线、某种其他类型的曲线。

所有图片的大小都相同。

如何使用最佳实践实现这一目标？

Answer 1

绝对定位可能是实现类似目标的方法。使用绝对定位，您基本上只需定义每个位置的 x/y 坐标。要绝对定位元素，您可以在 CSS 中设置 position: absolute;，然后设置 top: 5px; 和 left: 5px;(即是，距顶部 5 个像素，距左侧 5 个像素；您也可以改用底部和右侧)。请注意，虽然它被称为“绝对”定位，这会让您认为它是相对于整个文档的，但实际上它只是相对于具有非 static 定位的第一个祖先元素(static 是正常定位模式).因此，如果您想在父级中包含一堆并正常定位，您可以将其设置为 position: relative;，或者您也可以绝对定位。如果没有父级有非静态定位，它将相对于整个页面。另一件需要注意的事情是，绝对定位的元素不占用任何空间，因此，例如，如果你有一个绝对定位的大元素，而窗口太小，则不会有滚动条。