将 DIVS 放在一行然后居中

Posted 2023-03-29

【中文标题】将 DIVS 放在一行然后居中

【英文标题】：Put DIVS on one line then center

【发布时间】：2014-08-10 06:35:02

【问题描述】：

我有一个带有 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;  
    

【问题讨论】：

如果父 div 具有浮动属性，则居中变得非常困难...

【参考方案1】：

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

html（删除占位符 <div>s 并添加缩进）

<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

【讨论】：

太棒了！太感谢了。这也有效！而且代码更干净。

这出于某种奇怪的原因，当我在实际站点上尝试时爆炸了。一切都在它自己的路线上。

如果你想链接到这个网站，我很乐意看看。

【参考方案2】：

--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 

【讨论】：

这在演示中完美运行，但在网站上，按钮不在同一行。我不知道为什么。

<div style="position: absolute; left: -5000px;"></div> 是干什么用的？你想隐藏它还是为什么要使用left: -5000px; 如果想隐藏它只需使用hidden 就像这样<div hidden></div> 也许这就是它在你的网站上中断的原因

老实说，我不确定。我从电子邮件服务提供商那里得到了那部分代码。我不想把它弄得太乱而破坏它。

【参考方案3】：

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

【讨论】：

如果父div设置了float属性则不起作用。

容器本身没有浮动，所以可以正常工作，里面的元素是浮动的。

不，不是电子邮件。不过感谢您的回复，非常感谢！