homepage Welcome to WebmasterWorld Guest from 23.23.22.200
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
How to center a submit form?
logancl




msg:4556343
 7:44 am on Mar 19, 2013 (gmt 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%;
}

 

birdbrain




msg:4556557
 7:38 pm on Mar 19, 2013 (gmt 0)

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

lucy24




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved