html, css с центром div. firefox good, chrome not good

Question

У меня есть 6 кнопок, они отлично смотрятся в firefox. но они находятся в плохом расположении в хроме. Кто-нибудь знает, как перенести эту проблему?

#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

Последнее уш является проблемой в хроме. быстрое решение, чтобы добавить один в нижнем

Demo

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> 

Answer 2

<br>, вероятно, Мессинг его, я бы обернуть каждую пару кнопки внутри div, решает проблему в хром для меня. См jsfiddle ниже

<div id="test"> 
    <div class="button-wrapper"> 
    <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> 
    </div> 
    <div class="button-wrapper"> 
    <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> 
    </div> 
    <div class="button-wrapper"> 
    <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> 
</div> 

#test { text-align: center; }

jsfiddle

Answer 3

насчет плавающих кнопок в контейнере и дать им запас?