Welcome to WebmasterWorld Guest from 54.226.22.192

Forum Moderators: not2easy

Message Too Old, No Replies

How to center a submit form?

     
7:44 am on Mar 19, 2013 (gmt 0)

New User

joined:Mar 19, 2013
posts: 1
votes: 0


theoldfashioned.squarespace.com

Just setting up a "Coming Soon" splash page with SquareSpace, and running in to a slight issue. I know it's due to my complete lack of knowledge in CSS, so hopefully you guys can help.

I'm trying to have the submit button, submit field, and the text right above it, to all be horizontally aligned. Basically to have it be dead center of the page and lining up with the logo above it.

Currently each object seems to be off just a bit.

Not sure if this helps, but here's the current CSS I've added:

form input[type=submit] {
background : url("http://i3.photobucket.com/albums/y96/LoganCl/Submit-Button-1.png") no-repeat center center !important;
display: block;
margin-left: auto;
margin-right: auto;
width : 100px;
height : 50px;
border : none;
color : transparent;
text-indent: -9999px;
background-size: 100%;
}
7:38 pm on Mar 19, 2013 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 952
votes: 4


Hi there logancl,

and a warm welcome to these forums. ;)

I would've been far better to have resized the image from 500x250 to 100x50 in the first place.

Nevertheless try it like this....


form input[type=submit] {
display:block;
width:100px;
height:50px;
border:none;
margin:auto;
background-image:url('http://i3.photobucket.com/albums/y96/LoganCl/Submit-Button-1.png');
background-repeat:no-repeat;
background-position:center center;
background-size:100%;
text-indent:-9999px;
}


birdbrain
10:18 pm on Mar 19, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13000
votes: 289


Show me a
text-indent: -9999px;

which is to say
{very-large-negative-number}{some-unit}


and I'll show you a workaround for something that should probably have been coded differently in the first place.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members