How to align center an inline-block element

Here’s a quick trick to center an inline-block element. When you normally do this, for example creating a CSS BUTTON and you want it centered, it would automatically float to the left. To fix this, you just need to add a width and a margin of “0 auto”. However, it won’t be fluid when resizing your browser.

A simple trick is to wrap it inside another div and add ‘text-align:center’

Example:
CSS:

.btn2{
display:inline-block;
background: red;
}

HTML:

<div style=”text-align: center;”>
<div class=”btn2b”>Order Now!</div>
</div>