CSS旋转不居中

Question

所以我有一个在悬停时旋转的圆圈，但是它没有居中，我不知道为什么（我确实添加了'transform-origin：center center'） 而且，对不起，我对css知之甚少，但是当有两个连续的选择器时，它的作用是什么意思？

这是我的代码：

#welcome:hover #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;  
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
transform-origin : center center;
}

#welcome #welcomeavatar{
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  transform-origin : center center;
}
 
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}


#welcome #speechbubble{
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#welcome #speechbubble{
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

<div id="welcome">
<div id="welcomeavatar"><img src="http://www.for-example.org/img/main/forexamplelogo.png"></div>
<div id="speechbubble"></div>

该片段未显示实际发生的情况，但它只是让您可以获得我的代码，这是真正的结果：www.typhotoshop.tumblr.com

感谢您抽出宝贵时间！

Answer 1

旋转实际上是围绕中心，但是您应用旋转的div大于图像。见下面的截图：

您要确保您旋转的div与内部图像的大小完全相同（即，从该div中移除宽度/高度或添加与此相同的宽度/高度图像）。

此外，margin-left上的#speechbubble也会在悬停时增加，因此旋转div再向左移动。在悬停和无悬停时使该边距相同，并且它不会移动。

希望有所帮助。

Answer 2

显然我不知道如何Stack Overflow。我原来的评论作为一个实际答案：

它偏离中心，因为你正在旋转的元素（#welcomeavatar）是display：block，它占据了容器的整个宽度。 使其显示内联块不太理想，因为它可以插入不需要的空格。

你应该给#welcomeavatar一个宽度和200px的高度（和你的图像一样）。然后你需要为你的图像添加一些样式以摆脱摆动。使图像显示：阻止并添加200px的高度/宽度。