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>

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

我知道解决方法很简单，但我找不到合适的方法。我有时将它包裹在一个<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用于输入字段：

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

然后，按以下步骤更新输入字段：

export const ERR_DOB = "Enter your Date of birth"

Answer 4

you can put in a table cell and then align the cell content.

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

Answer 5

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

Answer 6

您可以使用以下两个简单的代码：

    display: block;
    margin:auto;

Answer 7

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

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

此链接将为您提供标记：

Why is the <center> tag deprecated in HTML?

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

7 个答案: