如何在不指定宽度的情况下居中对齐输入标记？ [英] How to center align an input tag without specifying the width?

问题描述

我有这个HTML：

<div id="siteInfo">
   <p>Some paragraph.</p>
   <input type="button" value="Some Button">
</div>

我有这个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;
}

但是，即使我已经把 text-align ：center ，按钮仍然与左边对齐。我也不喜欢指定宽度，因为我想它改变取决于文本的长度。我知道这个解决方案很简单，但我找不到一个正确的方法来做到这一点。我有时会把它包裹在一个< p> 标签的中心对齐，但这是额外的标记。

However, even if I already put text-align: center, the button is still aligned to the left. I also don't like to specify the width since I'd like it to change depending on the length of the text. 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.

推荐答案

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

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

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