将DIVS放在一条线上然后居中

Question

我有一个包含2个输入和一个提交按钮的表单。

他们在不同的DIVS中，所以我使用左浮动将它们全部放在一行中。

我将整个东西包含在一个更大的DIV中，并且我在左右边缘使用auto来尝试将整个事物放在中心。

无论我做什么，我都无法将这种形式集中在一起。这让我发疯了。我确信这很简单，我只是想念。我做错了什么？

提前致谢！

http://jsfiddle.net/T84hE/

这是我正在使用的CSS：

    #mc_bottom_signup{
         width:90%;  
         margin: 0 auto;

    }

    #mc_bottom_signup input[type="text"],
    #mc_bottom_signup input[type="email"] {
        margin-right: .25em;
        width:30%;
        float:left;  
    }

    #mc-embedded-subscribe {
        margin-top: 0;
        float:left;  
    }

Answer 1

--DEMO--

使用text-align: center，display: inline-block和max-width:30%

#mc_bottom_signup{
       width:90%;  
       margin: 0 auto;
       text-align:center;
    }
#mc_bottom_signup form div{
       max-width:30%;
       display: inline-block;
    }
#mc_bottom_signup input[type="text"],
#mc_bottom_signup input[type="email"] { 

    }

#mc-embedded-subscribe {

}

Answer 2

虽然这可以通过浮点数实现，但我更喜欢在子项上使用inline-block，然后在父项上使用text-align: center。

HTML（已移除的占位符<div> s＆amp;添加缩进）

<div id="mc_bottom_signup">       
    <form id="mc-embedded-subscribe-form" class="validate" action="http://trinidadpena.us5.list-manage.com/subscribe/post?u=a99f40b5b94ce684ab690557e&amp;id=9d41329865" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">      
        <input id="mce-FNAME" class="required" name="FNAME" type="text" value="" placeholder="your    first name" /> 
        <input id="mce-EMAIL" class="required email" name="EMAIL" type="email" value="" placeholder="your email address" />
        <div style="position: absolute; left: -5000px;">
            <input tabindex="-1" name="b_a99f40b5b94ce684ab690557e_9d41329865" type="text" value="" />
        </div>       
        <input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Yes, I want in!" />
    </form>
</div>

CSS（较少特异性）

#mc_bottom_signup{
    width:90%;  
    margin: 0 auto;
    text-align: center;
}
#mc_bottom_signup input{
    display: inline-block;
}

DEMO

Answer 3

margin: 0 auto;仅在已知元素宽度时才有效。我会设置一个固定的宽度，然后使用媒体查询设置百分比宽度，因为看起来你正在处理一个不支持其他内容集中方法的电子邮件。