HTML CSS button text alignment isn't working

Question

I have code like this:

 <button class="prikazi_pretragu">Napredna Pretraga</button>​

and CSS:

button {
  display:inline;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  float: right; 
  clear: both; 
  padding: 0 50px 5px 5px; 
  text-align: left; 
  margin: 0 0 10px 0; 
  border: none; 
  background: url('../img/resursi/advsearch_plus.png') no-repeat 0 -28px rgba(0,0,0,.09);
  font-size: 14px; 
  height: 28px;
  text-align: right
}​

text-align is not working. What is the problem?

http://jsfiddle.net/KjGBW/1/

Answer 1

It is working. It is aligned to the right (quite pointlessly, since you haven't explicitly set a width). It's just that you have a 50px padding on the right and that's why it seems to be aligned to the left.

padding: 0 50px 5px 5px;

Values are for top right bottom left, in this order.

Set it to padding: 0 5px 5px 5px;

Also, if you set a width of let's say 300px you will see it clearly aligned to the right.

See http://jsfiddle.net/thebabydino/KjGBW/5/ - I have changed the padding and added a width. Now you can see clearly that it is aligned to the right.

Answer 2

set button display to 'grid'

button{
   display: grid;
}