html，带有中心div的css。火狐谷歌， Chrome 不好

Question

我有 6 个按钮， 它们在 Firefox 中看起来不错。但它们在 chrome 中的对齐方式不佳。 有人知道如何解决这个问题吗？

#test {
        text-align: center;
    }

<div id="test">
    <button><img src="http://lorempixel.com/99/99"   width="100" height="100"/></button>
    <button><img src="http://lorempixel.com/100/100" width="100" height="100"/></button>
    <br/>
    <button><img src="http://lorempixel.com/101/101" width="100" height="100"/></button>
    <button><img src="http://lorempixel.com/103/103" width="100" height="100"/></button>
    <br/>
    <button><img src="http://lorempixel.com/98/98"   width="100" height="100"/></button>
    <button><img src="http://lorempixel.com/102/102" width="100" height="100"/></button>
    </div>

Answer 1

最后一个 br 是 chrome 的问题。一个快速的解决方法是在底部添加一个

演示

https://jsfiddle.net/4mL8becz/

HTML

<div id="test">
    <button><img src="" width="100" height="100" /></button>
    <button><img src="" width="100" height="100" /></button>
<br>
    <button><img src="" width="100" height="100" /></button>
    <button><img src="" width="100" height="100" /></button>
<br>
    <button><img src="" width="100" height="100" /></button>
    <button><img src="" width="100" height="100" /></button>
<br>
</div>