计算具有相同类别的每个项目的保证金

Question

我想在不同的X轴上放置不同宽度的不同DIV，（50％，30％......） 所以我尝试了这个解决方案：

$(document).ready(function() {
$('.axis').each(function() {
var $this = $(this);
$this.css('margin-left', -(startWidth / 2) + 'px');
});
});

CSS：

#item_1 {
position: absolute;
top: 100px;
left: 50%;
width: 500px;
height: 100px;
}

不知怎的，它还没有工作......

<div class="axis" id="item_1"></div>
<div class="axis" id="item_2"></div>
<div class="axis" id="item_3"></div>

这是一个显示问题的JFiddle，我想让ITEMS以X轴为中心......

https://jsfiddle.net/gtpadmy2/

Answer 1

不需要JS。 只需添加一个将半边距修复为CSS的翻译：

.axis {
  // other properties
  left: 50%;
  transform: translateX(-50%);
}

Updated fiddle.