Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Simple CSS: Text won't center in a button

Tags:

css

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

like image 677
gbhall Avatar asked May 21 '10 15:05

gbhall


People also ask

How do I center text in a button in CSS?

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.

Why is text-align center not working?

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.

How do I force a center in CSS?

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.

How do I center text in a button in bootstrap?

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.


1 Answers

Testing this in Chrome, you need to add

padding: 0px; 

To the CSS.

like image 58
Tejs Avatar answered Sep 18 '22 19:09

Tejs