Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,256
Total Threads: 106,575
Total Posts: 592,698
There are 96 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Help With Centering CSS Button

Thread title: Help With Centering CSS Button
Reply    
    Thread tools Search this thread Display Modes  
12-14-2012, 03:02 PM
#1
kaymeis is offline kaymeis
Status: I'm new around here
Join date: Jun 2012
Location: accra
Expertise: design, writing
Software: photoshop, alleycode, GIMP,
 
Posts: 13
iTrader: 0 / 0%
 

kaymeis is on a distinguished road

  Old  Help With Centering CSS Button

I need help centering a CSS Button.: I tried using the display tag but instead it extends the width of the button. Please help!

12-14-2012, 03:53 PM
#2
Dan is offline Dan
Dan's Avatar
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
 
Posts: 3,164
iTrader: 15 / 86%
 

Dan is an unknown quantity at this point

  Old

add text-align:center; to the button's container element.

Reply With Quote
12-14-2012, 07:22 PM
#3
kaymeis is offline kaymeis
Status: I'm new around here
Join date: Jun 2012
Location: accra
Expertise: design, writing
Software: photoshop, alleycode, GIMP,
 
Posts: 13
iTrader: 0 / 0%
 

kaymeis is on a distinguished road

  Old

Still no change..The button is still sitting in the left corner.

Reply With Quote
12-14-2012, 08:32 PM
#4
kaymeis is offline kaymeis
Status: I'm new around here
Join date: Jun 2012
Location: accra
Expertise: design, writing
Software: photoshop, alleycode, GIMP,
 
Posts: 13
iTrader: 0 / 0%
 

kaymeis is on a distinguished road

  Old

Just to hlp you out here is the code for the button:


.button {margin:0 auto;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px;
text-decoration: none;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
border: solid #003366 2px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#42aaff), to(#003366));
background: -moz-linear-gradient(top, #42aaff, #003366);}

.button:hover {background: #42aaff;}

Reply With Quote
12-15-2012, 06:04 AM
#5
Dan is offline Dan
Dan's Avatar
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
 
Posts: 3,164
iTrader: 15 / 86%
 

Dan is an unknown quantity at this point

  Old

add display:block; to .button. Margin won't work otherwise.

Reply With Quote
Reply    


Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed