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


我有这些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> 中心对齐的标签,但这是我想避免的额外标记。


27
2018-02-13 17:15


起源




答案:


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


53
2018-02-13 17:16



这非常有效。我只是想知道为什么会这样?是因为输入是内联元素而不是<p>之类的块元素?如果我将中心对齐放在<p>标签本身上,它可以正常工作。只是想知道为什么我不能为<input>做同样的事情。 - catandmouse
这是因为 center 属性会影响声明它的元素内部的内容。也就是说,之间的一切 <p> 和 </p>,以及之间的一切 <input> 和 </input>,这可能没什么,因为你已经缩写它 <input /> 甚至 <input>。 - dotancohen
我懂了。这就说得通了。谢谢。 :d - catandmouse
这似乎与之相冲突 display:inline-flex,它停止工作 - Michael


写这个:

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

http://jsfiddle.net/XfSz6/


7
2018-02-13 17:21





您可以将以下CSS用于输入字段:

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

然后,更新输入字段,如下所示:

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

3
2017-11-07 15:13





您可以放入表格单元格,然后对齐单元格内容。

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

1
2017-08-13 13:41



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


具有 text-align:center 你需要将这种风格添加到工作中 #siteInfo div或将输入包装在段落中并添加 text-align:center 到段落。


0
2018-02-13 17:17





你也可以使用标签,这适用于div和其他一切:

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

此链接将帮助您标记:

为什么HTML中不推荐使用<center>标记?


-6
2018-04-02 21:52



这是最糟糕的事情。和链接 按照字面 说它被弃用了。 - KidDoesCodingAnd HasNoFriends