如何将输入标签与中心对齐而不指定宽度？ [英] How to align an input tag to the center without specifying the width?

问题描述

我有这些HTML和CSS：

< truedata-babel =false>

#siteInfo input [type =按钮] {背景：无重复滚动0 0＃66A3D2;边框颜色：#FFFFFF＃327CB5＃327CB5 #FFFFFF; border-radius：10px 10px 10px 10px; border-style：solid; border-width：1px; box-shadow：1px 1px 3px＃333333;颜色：#FFFFFF;光标：指针; font-weight：bold;填充：5px; text-align：center; text-shadow：1px 1px 1px＃000000;}

< ; div id =siteInfo> < p>部分段落。< / p> < input type =buttonvalue =Some Button>< / div>

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

我知道这个解决方案很简单，但我找不到一个正确的方法来做到这一点。我有时会将它包裹在一个中心对齐的< p> 标记中，但这是我想要避免的额外标记。

解决方案

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

I have these HTML and 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?

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.

解决方案

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

这篇关于如何将输入标签与中心对齐而不指定宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！