I am trying to center multiples div so that it works a cross all browser.
<style>
.boxContent {
width: 288px;
height: 288px;
background-color: #777;
margin: 2px;
display: inline-block;
}
.boxContainer {
background-color: #333;
text-align: center;
display: table;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="boxContainer center">
<div class="boxContent">asda</div>
<div class="boxContent">asda</div>
<div class="boxContent">asdas</div>
<div class="boxContent">asda</div>
<div class="boxContent">asdas</div>
<div class="boxContent">asda</div>
<div class="boxContent">asda</div>
<div class="boxContent">asda</div>
<div class="boxContent">asda</div>
<div class="boxContent">asda</div>
<div class="boxContent">asda</div>
</div>
</div>
</div>
</body>
So far this works how i wanted on google chrome but it doesnt look the same when on firefox and looks even worse on IE 10.
Thank you
remove the
and you will get the same result.