Search code examples
htmlcsscss-floatcenter

Put DIVS on one line then center

I have a form with 2 inputs and a submit button.

They are in different DIVS, so I'm using a left float to get them all in one line.

I have the whole thing contained in a larger DIV, and I'm using auto on the left and right margins to try and center the whole thing.

No matter what I do I can't get that form centered. It's making me crazy. I'm sure it's something simple that I'm just missing. What am I doing wrong?

Thanks in advance!

http://jsfiddle.net/T84hE/

Here's the CSS I'm using:

    #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;  
    }
Solution

  • Whilst this could be achieved with floats, I prefer using inline-block on children, then text-align: center on the parent.

    HTML (Removed placeholding <div>s & added indentation)

    <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 (Less specificity)

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

    DEMO