ASP.NET - how to center table using css - Asked By deepi singh on 30-Dec-10 04:32 AM

Hi,


how to center table using css without center tag....
Danasegarane Arunachalam replied to deepi singh on 30-Dec-10 04:41 AM
CSS:

.centered-table {
   margin-left: auto;
   margin-right: auto;
}


Div

<div class="centered">
<h3>Test of Centering</h3>
<p>
Table of cities and states
</p>
<table class="centered-table" border="1">
    <tr><td>Pekin</td> <td>Illinois</td></tr>
    <tr><td>San Jose</td><td>California</td></tr>
</table>
</div>
Venkat K replied to deepi singh on 30-Dec-10 04:46 AM

The correct way to center block elements, like tables, in CSS is to set the margins to this:

margin-left: auto; margin-right: auto;


body { text-align: center; }
#centerItem { text-align: left; margin: auto; }


apply this class to <table

<table class="CenterItem" .....
Or

<table style="text-align: left; width: 60%; margin: auto;" border="1"
  cellpadding="2" cellspacing="2">

Thanks
div v replied to deepi singh on 30-Dec-10 04:47 AM
hi ,

.centertbl
{ 
text-align: center;
}

.centertbl table
{ 
margin-left: auto;
margin-right: auto;
text-align: left;
}

<div class="
centertbl 
"><table> </table> </div>

Vivek Jagga replied to deepi singh on 30-Dec-10 05:13 AM
Deepi

You can add a single line to your CSS style sheet to center all tables horizontally:

table { margin: auto; }

Or you can add that same line to your table directly:

<table style="margin: auto;">