如何在固定宽度的 div 中居中动态宽度按钮？

Posted 2023-03-29

【中文标题】如何在固定宽度的 div 中居中动态宽度按钮？

【英文标题】：How to center a dynamic width button inside a fixed width div?

【发布时间】：2012-05-13 00:58:59

【问题描述】：

根据包裹在固定 div 中的值，我有不同宽度的提交按钮或普通按钮。现在，由于缺少 width 属性，即使在具有 margin: 0 auto; 和 display:block; 之后，按钮也不会在 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;

【参考方案1】：

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

【参考方案2】：

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

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

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

【讨论】：

感谢您的回答。但是我不能将text-align:center 分配给我的 div，因为我还有其他文本也包含在同一个 div 中。有没有办法通过调整按钮的 css 来使按钮居中？

@Vivek 您要么需要在按钮上设置宽度，要么使用text-align: center; 在按钮周围添加一个额外的包装元素。

【参考方案3】：

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

看看这个网址....

【讨论】：

您已将width 和height 添加到按钮的css 中。但在这里，我无法为按钮设置固定的width 和height。我已经删除了宽度和高度属性并将按钮包裹在一个 div 中，结果是这个 http://jsfiddle.net/gSaBj/1/ 按钮没有居中。

@vivek : 你想要提交按钮的容器中心水平和垂直都对吗？

只需将按钮水平居中即可。