如何在不指定宽度的情况下将输入标签与中心对齐？答案

【问题标题】：How to align an input tag to the center without specifying the width?如何在不指定宽度的情况下将输入标签与中心对齐？
【发布时间】：2012-03-05 02:37:46
【问题描述】：

我有这些 HTML 和 CSS：

#siteInfo input[type="button"] {
  background: none repeat scroll 0 0 #66A3D2;
  border-color: #FFFFFF #327CB5 #327CB5 #FFFFFF;
  border-radius: 10px 10px 10px 10px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 1px 1px 3px #333333;
  color: #FFFFFF;
  cursor: pointer;
  font-weight: bold;
  padding: 5px;
  text-align: center;
  text-shadow: 1px 1px 1px #000000;
}

<div id="siteInfo">
  <p>Some paragraph.</p>
  <input type="button" value="Some Button">
</div>

我希望按钮与中心对齐；然而，即使在 CSS 中使用text-align: center，它仍然在左侧。我也不想指定宽度，因为我希望它随着文本的长度而变化。我该怎么做？

我知道解决这个问题的方法很简单，但我找不到合适的方法。我有时会将它包裹在一个居中对齐的 <p> 标签周围，但这是我想避免的额外标记。

【问题讨论】：

标签： html css

【解决方案1】：

您需要将text-align:center 放在包含的 div 上，而不是放在输入本身上。

【讨论】：

这很有效，谢谢。我只是想知道为什么会这样？是因为输入是一个内联元素而不是像
这样的块元素吗？如果我将中心对齐放在

标签本身上，它工作正常。只是想知道为什么我不能为做同样的事情。
这是因为center 属性会影响声明它的元素内部的内容。也就是说，<p> 和 </p> 之间的所有内容，以及 <input> 和 </input> 之间的所有内容，这可能没什么，因为您将其缩写为 <input /> 甚至 <input>。
我明白了。这就说得通了。谢谢。 :D
这似乎与停止工作的display:inline-flex 冲突
愿上帝保佑你！

【解决方案2】：

您可以在输入字段中使用以下 CSS：

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

然后，更新您的输入字段如下：

<input class="center-block" type="button" value="Some Button">

【讨论】：

或者只是：显示：块；边距：自动；

【解决方案3】：

写这个：

#siteInfo{text-align:center}
p, input{display:inline-block}

http://jsfiddle.net/XfSz6/

【讨论】：

这是重要的一步。如果显示只是“块”，它不会居中，即使在外部容器上设置了“text-align：center”。

【解决方案4】：

你可以使用这两个简单的行代码：

    display: block;
    margin:auto;

【讨论】：

【解决方案5】：

要使text-align:center 起作用，您需要将该样式添加到#siteInfo div 或将输入包装在一个段落中并将text-align:center 添加到该段落。

【讨论】：

【解决方案6】：

你可以放入一个表格单元格，然后对齐单元格内容。

<table>
   <tr>
     <td align="center">
        <input type="button" value="Some Button">
     </td>
   </tr>
</table>

【讨论】：

不要使用表格进行格式化！ 90 年代是 20 年前。

【解决方案7】：

您也可以使用标签，这适用于 div 和其他所有内容：

<center><form></form></center>

此链接将帮助您处理标签：

Why is the <center> tag deprecated in HTML?

【讨论】：

这是最糟糕的事情。并且链接字面意思说它已被弃用。