Form button not centering

David Schure
David Schure used Ask the Experts™
on
I am having a problem with the submit button centering....

<form id="myform" class="contact-form" action="contact.php" method="post" >
                <div class="row">
                    
                    <div class="mymail">
                        <input type="text" name="name" value="" maxlength="100" placeholder="Name"/>
                    </div>
                    
                    <div class="mymail">
                        <input type="text" name="postal_code" value="" maxlength="10" placeholder="Postal Code"/>
                    </div>
                    <div class="mymail">
                        <input type="text" name="email_address" value="" maxlength="100" placeholder="E-Mail"/>
                    </div>
                    <div class="divider" style="height: 50px"></div>
                    <div class="col-md-12">                        
                        <input class="sub-btn p-btn-medium" type="submit"></input>
                    </div>
                </div>
            </form>

Open in new window


.sub-btn,
.p-btn {
    margin-right: auto;
    margin-left: auto;
	display: inline-block;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: 0.5px;
    font-weight: 300;
    padding: 6px 25px;
    border: 1px solid #3c3c3c;
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Consultant & Challenge Subduer
Top Expert 2009
Commented:
Auto margins only center block-level elements (those with an outer display type of block). Inline-blocks have an inner type of block but an outer one of inline. I suggest giving a "buttons" class to its parent and giving "text-align:center" to ".buttons" in your stylesheet.

Also <input> element are always empty and so should not have an end tag.  I recommend using the <button> element for buttons in forms instead of the <input> element.
                    <div class="col-md-12 buttons">                        
                        <button class="sub-btn p-btn-medium" type="submit">Submit</button>
                    </div>

Open in new window

RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
change the display: inline-block to display: block;

Author

Commented:
Thank you David S.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial