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

I have these HTML and CSS:

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

I'd like the button to be aligned to the center; however, even with text-align: center in the CSS, is still on the left. I also don't want to specify the width since I'd like it to change with the length of the text. How do I do that?

我希望按钮对齐到中心;然而，即使是文本对齐:CSS中的center，仍然在左边。我也不想指定宽度，因为我希望它随文本的长度变化。我该怎么做呢?

I know the solution to this is simple but I can't find a proper way to do it. I would sometimes wrap it around a <p> tag that is center aligned but that's extra mark-up which I'd like to avoid.

我知道解决这个问题的办法很简单，但我找不到合适的方法。我有时会用

标签来包装它，它是中心对齐的，但这是额外的标记，我想避免。

6 个解决方案

#1

You need to put the text-align:center on the containing div, not on the input itself.

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

#2

write this:

写这篇文章:

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

http://jsfiddle.net/XfSz6/

#3

You can use the following CSS for your input field:

您可以使用以下CSS为您的输入字段:

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

Then,update your input field as following:

然后，更新输入字段如下:

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

#4

To have text-align:center work you need to add that style to the #siteInfo div or wrap the input in a paragraph and add text-align:center to the paragraph.

要使文本对齐:居中，您需要将该样式添加到#siteInfo div中，或者将输入封装到一个段落中，并将文本对齐:center添加到段落中。

#5

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>

#6

-6

You can also use the tag, this works in divs and everything else:

你也可以使用这个标签，这在divs和其他任何东西上都有用:

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

This link will help you with the tag:

这个链接将帮助您处理标签:

Why is the <center> tag deprecated in HTML?

为什么

标记在HTML中不被使用?

#1