我正在对某些 div 使用可排序的 JQuery。
margin-left: auto; margin-right: auto;
div 使用 css 规则“ ”在其父 div 内居中
问题:当我拖动一个元素时,它会跳到左侧,因为边距不再起作用。
这是一个显示问题的小提琴:http: //jsfiddle.net/annam/35MC3/28/
我该如何解决它,使元素始终居中?
我正在对某些 div 使用可排序的 JQuery。
margin-left: auto; margin-right: auto;
div 使用 css 规则“ ”在其父 div 内居中
问题:当我拖动一个元素时,它会跳到左侧,因为边距不再起作用。
这是一个显示问题的小提琴:http: //jsfiddle.net/annam/35MC3/28/
我该如何解决它,使元素始终居中?
我可能会这样做:
添加一个额外的容器,使项目居中,这样可排序的项目就不需要对齐。
<div id="outerContainer">
<div id="container">
<div class="draggable"></div>
<div class="draggable"></div>
</div>
</div>
...
#outerContainer {
width: 200px;
text-align: center;
height: 300px;
border: 1px solid green;
position: relative;
}
#container {
width: 100px;
margin:0 auto;
}
.draggable {
width: 100px;
height: 100px;
background: yellow;
margin: 10px auto;
cursor: move;
}