javascript - 水平居中未指定数量的div？

Question

我想实现一个按钮，添加 X 数量的元素并排放置(水平)，但是让我们说一切看起来应该居中，所以第一个 div 应该出现在中间，但是如果我再次点击，第二个div 应该出现在第一个 div 旁边，但它们看起来必须同样居中，依此类推。

我真的不知道我是否解释了自己并提前感谢。

Answer 1

居中对齐 div 的容器，并内联显示 div。

$('.newDiv').on('click', function() {
    $('.container').append('<div class="test">test</div>');
});

.container {
    height: 30px;
    width: 100%;
    background: aqua;
    text-align: center;
}
.test {
    display: inline;
    background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="newDiv" href="#">add div</a>
<div class="container"></div>