CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Frank
Frank

Reputation: 61

html, css with center div. firefox good, chrome not good

I have 6 buttons, they looks good in firefox. but they are in a bad alignment in chrome. Anyone know how to slove this problem?

#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>

Upvotes: 0

Views: 67

Answers (3)

themca
themca

Reputation: 321

What about floating the buttons in a container and give them a margin?

Upvotes: 1

beginner-html
beginner-html

Reputation: 11

the <br> is probably messing it up, I would wrap each pair of buttons inside a div instead, solves the problem in chrome for me. See jsfiddle below

<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

Upvotes: 1

Tasos
Tasos

Reputation: 5361

The last br is the issue in chrome. a quick fix is to add one at the bottom

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>

Upvotes: 1

Related Questions