如何将输入标签与中心对齐而不指定宽度? [英] 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屋!