• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2086
  • Last Modified:

How to center a button on web page ?

I have a web page (see picture below) which uses a submit button.  I'm having problems centering this button in the middle of the page.

For the code which includes the 'Comments' & 'Submit' button see the snippet below.

How would this code have to change to center the button??  

Thanks!
<table style="width: 100%" border="0" cellspacing="0" cellpadding="0" id="MainTable" runat="server">
        <tr>
        ...
        ...
        <tr>
            <td colspan="1" style="height: 37px; width: 159px;"> Comments:</td>
            <td colspan="2" style="height: 37px; width: 240px;">
                <asp:TextBox id="TBComment" runat="server" Width="630px" Height="50px" TextMode="MultiLine"></asp:TextBox>
            </td>
        </tr> 
         <tr> 
            <td valign="top" style="height: 4px; width: 159px;"> &nbsp;</td>
        </tr>
         <tr>
            <td colspan="3" align="center" valign="middle" style="height: 2px; width: 259px;"> 
                &nbsp;<asp:Button ID="BSubmit" runat="server" Text="Submit" Width="103px" BorderStyle="Groove" OnClick="BSubmit_Click" TabIndex="26" /></td>
        </tr>        
    </table>

Open in new window

UserModTable.JPG
0
John500
Asked:
John500
3 Solutions
 
edster9999Commented:

         <tr>
            <td colspan="3" align="center" valign="middle" style="height: 2px; width: 259px;"> 
                 <center><asp:Button ID="BSubmit" runat="server" Text="Submit" Width="103px" BorderStyle="Groove" OnClick="BSubmit_Click" TabIndex="26" /></center></td>
        </tr>      

Open in new window

0
 
edster9999Commented:
you also need to make sure all rows have 3 TDs in them.
This can be done with 3 different <td>text</td>
or using colspan (as you have above).
The one that stands out as wrong is

         <tr>
            <td valign="top" style="height: 4px; width: 159px;">  </td>
        </tr>

This should have colspan="3" in it

also.... you should always have 'something' other than spaces inside a table row or some browsers will not print it so in the space you should do &nbsp;

so it becomes ...

         <tr>
            <td colspan="3" valign="top" style="height: 4px; width: 159px;">&nbsp;</td>
        </tr>
0
 
the_bachelorCommented:
your problem was the width: 259px; property that you have in the styling of the <td></td> tags where you had your submit button. Taking that out is a good start
<table style="width: 100%" border="0" cellspacing="0" cellpadding="0" id="MainTable" runat="server">
        <tr>
        ...
        ...
        <tr>
            <td colspan="1" style="height: 37px; width: 159px;"> Comments:</td>
            <td colspan="2" style="height: 37px; width: 240px;">
                <asp:TextBox id="TBComment" runat="server" Width="630px" Height="50px" TextMode="MultiLine"></asp:TextBox>
            </td>
        </tr> 
         <tr> 
            <td valign="top" style="height: 4px; width: 159px;"> &nbsp;</td>
        </tr>
         <tr>
            <td colspan="3" align="center" valign="middle" style="height: 2px;"> 
                &nbsp;<asp:Button ID="BSubmit" runat="server" Text="Submit" Width="103px" BorderStyle="Groove" OnClick="BSubmit_Click" TabIndex="26" /></td>
        </tr>        
    </table>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Anurag ThakurCommented:
try this code it works
the colspan int eh td in line no 12 was also missing & i have also removed the width inthe td on line 15 as suggested by both the above authors
<table id="MainTable" runat="server" border="1" cellpadding="0" cellspacing="0" style="width: 100%">
	<tr>
	</tr>
	<tr>
		<td colspan="1" style="height: 37px; width: 159px;">
			Comments:
		</td>
		<td colspan="2" style="height: 37px; width: 240px;">
			<asp:TextBox ID="TBComment" runat="server" Height="50px" TextMode="MultiLine" Width="630px"></asp:TextBox>
		</td>
	</tr>
	<tr>
		<td colspan="3" style="height: 4px; width: 159px;" valign="top">
		</td>
	</tr>
	<tr>
		<td align="center" colspan="3" style="height: 2px;" valign="middle">
			<asp:Button ID="BSubmit" runat="server" BorderStyle="Groove" OnClick="Button_Click" TabIndex="26" Text="Submit" />
		</td>
	</tr>
</table>

Open in new window

0
 
edster9999Commented:
Well if you want to be VERY precise you cannot have a <tr> and </tr> without anything in them (so I've dropped that)

No point in having a colspan="1" - so I've dropped that

The colspan3 line is too short (although most browsers would pad it out) so I stretched that to the wdith of the 2 cells above (399)

<table id="MainTable" runat="server" border="1" cellpadding="0" cellspacing="0" style="width: 100%">
        <tr>
                <td style="height: 37px; width: 159px;">
                        Comments:
                </td>
                <td colspan="2" style="height: 37px; width: 240px;">
                        <asp:TextBox ID="TBComment" runat="server" Height="50px" TextMode="MultiLine" Width="630px"></asp:TextBox>
                </td>
        </tr>
        <tr>
                <td colspan="3" style="height: 4px; width: 399px;" valign="top">
                </td>
        </tr>
        <tr>
                <td align="center" colspan="3" style="height: 2px;" valign="middle">
                        <asp:Button ID="BSubmit" runat="server" BorderStyle="Groove" OnClick="Button_Click" TabIndex="26" Text="Submit" />
                </td>
        </tr>
</table>

Open in new window

0
 
John500Author Commented:
Thanks, I was able to get something from each of your posts.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now