HTML CSS 按钮文本对齐无效

Question

我有这样的代码：

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

和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不起作用。问题出在哪里？

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

- Sasha

---

你已经声明了两次，一次在左边，一次在右边。 - albert

Answer 1

它正在工作。它被对齐到右侧（相当毫无意义，因为您没有明确设置宽度）。只是因为右侧有50像素的填充，所以它看起来好像是对齐到左侧。

padding: 0 50px 5px 5px;

数值的顺序是上右下左。

将其设置为padding: 0 5px 5px 5px;

同时，如果您设置了宽度，比如300像素，您将清楚地看到它对齐到右侧。

参见http://jsfiddle.net/thebabydino/KjGBW/5/ - 我已更改了填充并添加了一个宽度。现在您可以清楚地看到它对齐到右边。

- Ana

---

Ana是正确的，你在右侧设置的巨大填充会给人左对齐的外观。 - Ayman Safadi

Answer 2

将按钮显示设置为'grid'。

button{
   display: grid;
}

- Ali Chraghi