如何CSS居中一个div，它是表单元素的子元素？答案

【问题标题】：how to CSS center a div, which is the child of a form element?如何CSS居中一个div，它是表单元素的子元素？
【发布时间】：2023-03-03 07:37:22
【问题描述】：

我不确定我做错了什么，但我一直在努力让这个 div 居中：

<form>
    <div class="submitter">
        <div data-role="controlgroup" data-type="horizontal">
            <input type="submit" value="submit" data-theme="e" />
            <input type="reset" value="reset" />
        </div>
    </div>
</form>

表格中有更多内容，但我只是对控制组的中心感兴趣。

我已经尝试了从text-align 到margin: 0 auto 所知道的一切，但我无法让它工作。在我绝望中，我为表单设置了一个固定宽度并添加了提交者元素，我将其扩展为100%，然后将控制组设置为display:inline-block，但我无法让它工作......

问题：
如何将控制组放置在表单的中心？

谢谢！

编辑：
这是我的表格

两列都是ul元素，width:49%;display:inline;

【问题讨论】：

您有预期结果的图表吗？
我可以发截图，1秒

标签： css forms html center alignment

【解决方案1】：

http://jsfiddle.net/Kyle_Sevenoaks/fNYb4/

使用属性选择器在内部 div 上使用 margin: 0 auto; 似乎可行。

div[data-role="controlgroup"]
{
    width: 50%;
    margin: 0 auto;
}

请记住，父元素需要设置宽度以及要居中的元素。

【讨论】：

我当然不明白为什么它会突然起作用，但似乎使用属性选择器就可以了。谢谢！
不客气，请注意，IE7 和 IE8 仅在指定 !DOCTYPE 时才支持属性选择器。 IE6 及更低版本不支持属性选择。
我是<!DOCTYPE html>-ing。谢谢（你的）信息。很高兴知道。

【解决方案2】：

保证金：0自动；对我有用（你应该使用 margin:0 auto; 为你的块设置宽度）

CSS：

<style>
.one {
border:1px solid;
width:300px;
margin:0 auto;
}
</style>

HTML：

<form>
    <div class="submitter">
        <div data-role="controlgroup" data-type="horizontal" class="one">
            <input type="submit" value="submit" data-theme="e" />
            <input type="reset" value="reset" />
        </div>
    </div>
</form>

【讨论】：

【解决方案3】：

我认为您应该首先针对父 div...

这是我在 jsFiddle 上的 Solution

【讨论】：

搞清楚了。感谢您的回答。