1

我有不同宽度的提交按钮或普通按钮，具体取决于它们包含在固定 div 中的值。现在，即使拥有margin: 0 auto;并且display:block;由于缺少width属性，按钮也不会在 div 内居中。如何在不明确设置每个按钮的宽度的情况下使它们居中？

input[type="submit"], .button {
      border: none;
      outline: none;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      color: white;
      display: block;
      cursor: pointer;
      margin: 0 auto !important;
      clear: both;
      padding: 5px 7px;
      text-shadow: 0 1px 1px #777;
      font-weight: bold;
      font-family: "Century Gothic", Helvetica, sans-serif;
      font-size: 14px;
      -moz-box-shadow: 0px 0px 3px #aaa;
      -webkit-box-shadow: 0px 0px 3px #aaa;
      box-shadow: 0px 0px 3px #aaa;
      background: #4797ED;
}
4

3 回答 3

1

设置input[type="submit"], .button {} 为display: inline-block;。然后将父级设置div为text-align: center;.

于 2012-05-03T13:45:48.033 回答
1

按钮是内联元素。是否有display:block必要出于其他原因，或者是否有任何反对将所有文本/内联元素集中在 div 中？

如果没有，您可以text-align:center改为分配给 div 并display:block从按钮中删除。

附带说明一下，您当前的样式在 FF12 中将按钮居中。你使用的是什么浏览器？编辑：也适用于 IE9 ( jsfiddle )。

于 2012-05-03T13:42:42.107 回答
0

http://jsfiddle.net/gSaBj/1/

看看这个网址....

于 2012-05-03T13:50:03.857 回答