Question

我提交了不同宽度的按钮或普通按钮，具体取决于它们包含在固定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;
}

Answer 1

按钮是内联元素。是display:block是出于其他原因还是做了什么反对，通常将div中的所有text / inline-elements集中在一起？

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

作为旁注，您当前的样式将按钮置于FF12中。你使用的是什么浏览器？编辑：也适用于IE9（jsfiddle）。

Answer 2

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

Answer 3

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

查看此网址....

如何将动态宽度按钮置于固定宽度div内？

3 个答案: