How to center squares in the \[code\]wrapper\[/code\] without using \[code\]text-align:center\[/code\]?
I need this because it also centers all text in squares, but I don't need this.HTML :\[code\] <div id="wrapper"> <div id="squares"> <div class="square">lol</div> <div class="square">lol</div> <div class="square">lol</div> <div class="square">lol</div> <div class="square">lol</div> <div class="square">lol</div> <div class="square">lol</div> </div> </div>\[/code\]CSS:\[code\]html, body{ height: 100%;}body { line-height: 18px;}#wrapper{ width: 960px; height: 100%; border: 1px solid red; margin: 0 auto;}.square { width:251px; height:207px; border: 1px solid #d6d6d6; -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.1); -moz-box-shadow: 1px 1px 3px rgba(0,0,0,.1); box-shadow: 1px 1px 3px rgba(0,0,0,.1); margin: 10px; overflow:hidden; position:relative; background-color:#fff; display: inline-block; cursor: pointer;}\[/code\]
I need this because it also centers all text in squares, but I don't need this.HTML :\[code\] <div id="wrapper"> <div id="squares"> <div class="square">lol</div> <div class="square">lol</div> <div class="square">lol</div> <div class="square">lol</div> <div class="square">lol</div> <div class="square">lol</div> <div class="square">lol</div> </div> </div>\[/code\]CSS:\[code\]html, body{ height: 100%;}body { line-height: 18px;}#wrapper{ width: 960px; height: 100%; border: 1px solid red; margin: 0 auto;}.square { width:251px; height:207px; border: 1px solid #d6d6d6; -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.1); -moz-box-shadow: 1px 1px 3px rgba(0,0,0,.1); box-shadow: 1px 1px 3px rgba(0,0,0,.1); margin: 10px; overflow:hidden; position:relative; background-color:#fff; display: inline-block; cursor: pointer;}\[/code\]