带有图像和边框的两列列表-旋转边框但不旋转图像

Two column list with images and border - rotate border but not image

本文关键字：旋转 图像 边框 列表 两列      更新时间：2023-09-26

我重建了一个朋友的旧flash网站。现在我仍然有问题。以下是示例：

左侧显示徽标。鼠标悬停在边框上时，应旋转边框。但在我的情况下，标志旋转到。此外，标志不是垂直居中。

因此，我可以如何使图像居中，并确保它们不会旋转。CSS有什么可能吗？或者我可以在没有边框的情况下重新创建相同的列表吗？

提前感谢

PS也许你可以给我看看这个例子的改进。因为我不是HTML/CSS方面的专家。。。

以下是一些要点：

要将一个元素集中在另一个元素中，可以这样做：

.centered {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px; 
    margin: auto;
}

请注意，绝对定位元素的位置与其offsetParent有关。因此，您需要在父链中定位至少一个元素（通常为relative）。

transform: rotate()旋转它所使用的元素中的所有元素。要解决这个问题，您需要将不想旋转的元素旋转到相反的方向。

jsFiddle上的一个高度简化的演示。

相关文章：