Search code examples
csswebskeleton-css-boilerplate

How to center this newsletter sign-up form?


I am trying to center the newsletter sign-up form from here. I have tried everything but it just simply refuse to be centered. I am using the skeleton CSS framework.


Solution

  • Use this code. i have no idea about skeleton. bus its works.

    <section class="news">
                <h2 class="">Get Notified for Early Access</h2>
                <form novalidate="" target="_blank" class="validate" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" method="post" action="//KloudTrader.us11.list-manage.com/subscribe/post?u=8ce5d035a2693858b995c33e9&amp;id=d252a06fa4">
                    <div class="row">
                        <div class="columns">
                            <label style="display:none" for="mce-EMAIL">
                                Email
                            </label>
                            <input type="email" id="mce-EMAIL" class="email required u-full-width" name="EMAIL" value="Enter your email">
                            <div class="clear" id="mce-responses">
                                <div style="display:none" id="mce-error-response" class="response"></div>
                                <div style="display:none" id="mce-success-response" class="response"></div>
                            </div>
                            <div style="position: absolute; left: -5000px;">
                                <input type="text" value="" tabindex="-1" name="b_8ce5d035a2693858b995c33e9_d252a06fa4">
                            </div>
                        </div>
                        <div class="columns">
                            <input type="submit" class="button u-full-width" id="mc-embedded-subscribe" name="subscribe" value="Subscribe">
                        </div>
                    </div>
                    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                </form>
            </section>
    
    
    
    .news {text-alig:center}
    .news .columns {float: none; display: inline-flex;}