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

Question

我重建了一个 friend 的旧 flash 网站。现在我还有问题。这是示例:

在左侧显示 Logo 。在鼠标悬停时应旋转边框。但在我的例子中，标志旋转到。此外， Logo 未垂直居中。

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

提前致谢

PS 也许你可以告诉我这个例子的改进。因为我不是 HTML/CSS 专家...

Answer 1

这里有几点:

要使一个元素在另一个元素中居中，您可以这样做:

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

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

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

A heavily simplified demo at jsFiddle .