Positioning of a Button

markhh · September 16th, 2011, 04:25 AM

Hi, i am trying to center a button in a table but i can't find a solution. Any ideas,

Many Thanks
Mark

morteza · September 16th, 2011, 02:00 PM

Can you elaborate more in details? Question is more general.
However if the table have only one column , add style = 'text-align:center;' attribute to td that contain button.
If table have more column you should add colspan = 'number of table columns' attribute to td that contain button and again add style = 'text-align:center;' .
There is another way to centralized a button in the container element(td element): set width of button use css rule or style attribute . for example width:100px. Then add margin-right:auto;margin-left:auto css rules. It makes button floated in middle of page.
Do you understand CSS language?
Could i help You??

markhh · September 18th, 2011, 01:28 PM

Hi, i am on page 308 of Beginning ASP.NET 4 by Imar Spaanjaars. On the page in question there is a submit button for the contact form. I was trying to familiarise myself further with CSS by positioning the button center or right using CSS as below,

Code:

 
#centerButton
{
position: "trying to set position here"; 
}

The selector type used above is the ID selector (#) which I thought would allow me to address the Button element directly via CSS, but I can't get it to work? Please note that the only values for positioning a button are Inherit, Absolute, Fixed, Relative and Static.

This started of as a general query, nothing important to get hung up on, but now I am really curious to find out why cannot apply CSS to this element.

Mark

Imar · September 18th, 2011, 02:12 PM

Hi there,

Positioning is used for different purposes than centering a button. For a detailed explanation of position take a look here:

http://www.w3schools.com/css/css_positioning.asp
http://www.barelyfitz.com/screencast...s/positioning/
http://www.google.com/#hl=en&sugexp=...q=css+position

In the contact form, the button is placed inside a table cell which you can use to center the button. Try this:

1. Assign a class (such as centered) to the td that contains the button.
2. Add the following CSS to your CSS file (from the theme for example)

Code:

 
.centered
{
  text-align: center;
}

Hope this helps,

Imar

markhh · September 19th, 2011, 03:49 AM

Hi Imar, many thanks for your reply which again works spot on.

Regards
Mark