In Firefox 'A' shows in the middle, on Chrome/IE it doesn't:
<button type="button" style="width:24px; text-align:center; vertical-align:middle">A</button>
Note the following has the same results:
<button type="button" style="width:24px;">A</button>
Edit: Now seems to be fixed in Chrome 5.0
We can center the button by using the following methods: text-align: center - By setting the value of text-align property of parent div tag to the center. margin: auto - By setting the value of margin property to auto.
This is because text-align:center only affects inline elements, and <aside> is not an inline element by default. It is a block-level element. To align it, we will have to use something other than text-align , or turn it into an inline element.
Simply add text-align center to parent div and set the child div display to inline-block. This will force our div to behave like inline element and therefore subjected text-align center. The difference between this method and margin: 0 auto is we don't need the width to be specified.
Answer: Use the text-center Class You can simply use the built-in class . text-center on the wrapper element to center align buttons or other inline elements in Bootstrap.
Testing this in Chrome, you need to add
padding: 0px;
To the CSS.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With