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

Question

我有这些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>

我希望按钮与中心对齐; 然而,即使text-align: center在CSS中,仍然在左边.我也不想指定宽度,因为我希望它随着文本的长度而改变.我怎么做？

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

Answer 1

你需要把它text-align:center放在包含div上,而不是放在输入本身上.

Answer 2

写这个:

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

http://jsfiddle.net/XfSz6/

Answer 3

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

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

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

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

Answer 4

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

    display: block;
    margin:auto;