Question

我在 DIV＆＃39; 的一组上制作动画，这些动画包裹在div id="wrapper"内使用 CSS3 。但是，如果我将鼠标悬停在圆角框上，则动画左对齐，但不是中心对齐。代码的网址是@ http://jsfiddle.net/X5Ycu/

<div id="wrapper">
<div class="roundedbox"></div>
<div class="ball"> </div>
<div class="greenball"> </div>
<div class="redball"> </div>
<div class="greenleaf"> </div>
<div id="pacman"> </div>
</div>

谢谢＆amp;此致

亚历

Answer 1

将块从内联块更改为display：block 添加保证金0自动删除绝对位置

在这里快速小提琴 http://jsfiddle.net/ktcle/X5Ycu/2/

#wrapper{
position:relative;
width: 400px
}

.roundedbox{
position:relative;
width:75px;
height: 75px;
background-color: pink;
display: block;
text-align: center;
margin: 10px auto;
border-radius:10px;
transition-property:border-radius width;
transition-duration:2s;
transition-timing-function:linear;

}

Answer 2

尝试以下：

div.roundedbox:hover{
    width:100px;
    left: 137.5px; //Add this line
}

Answer 3

您可以添加保证金应用效果，例如TOP和BOTTOM RIGHT和LEFT，这两种效果应用于原始尺寸的一半

见例：http://jsfiddle.net/X5Ycu/1/

.limeball{
   margin: 0px; // original margin
   width: 100px; //original width
   height: 50px; //original height
}

.limeball{
  width: 0px;
  height:0px;
  margin: 25px 50px;
  // margin  results:
  // (original width) / 2 = 50px (LEFT AND RIGHT)
  // (original height) / 2 = 25px (TOP AND BOTTOM)
}

Answer 4

好吧，如果您按照说法使用现代CSS，那么您可以指定：

left: 50%; /* or figure out where the center is */

然后只需将元素向左移动一半，您可以使用transform执行此操作：

transform: translateX(-50%);

所以现在，即使你的元素正在改变它的大小，它的位置（翻译）也会根据它的大小而改变。无论您的元素如何定位或显示，此（翻译）始终有效。

您肯定需要使用一些供应商前缀。

动画时居中DIV

4 个答案: