asked on

How can I have content in a table cell centered?

Hi, I'm using asp.net 3.5
Attached is screen shot with cell outlined in browser and the rendered html page source. i would like to center these 2 charts in their cells. How to do that Thank you.
td-center.jpg
BiweeklyResponse.html
BiWeeklyResponse.aspx

ASKER CERTIFIED SOLUTION

Jerry Miller

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Carlos Villegas

This is your aspx page fixed, using the style "text-align:center" for both cells:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BiWeeklyResponse.aspx.cs" Inherits="BiWeeklyResponse" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<%@ Register Assembly="CrystalDecisions.Web, Version=10.5.3700.0, Culture=neutral, PublicKeyToken=692fbea5521e1304"
    Namespace="CrystalDecisions.Web" TagPrefix="CR" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Adapt Study Biweekly Progress</title>
    
    <style type="text/css">
        * {margin:3px auto;padding:3px;}
        div.centerer{ width:100%; margin: 0 auto;} 
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="centerer">
    <table id="tblChart" runat="server">
     <tbody>
    <tr><td align="left" colspan="3"><p style="font-size:medium;">You are doing a great job getting to both of your goals. Keep it up! Take a look at the graphs to see how you are doing on your goals as compared to other people like you in the study.
<br /></p></td></tr>     
<%--    <tr><td align="center" colspan="3"><p style="font-size:x-large;">Adapt Study Progress Report</p></td></tr>
--%>   
    <tr><td style="width:48%; text-align: center;">
            <asp:Chart ID="Chart1" runat="server" BorderlineDashStyle="Solid" 
                BackGradientStyle="TopBottom" BackColor="#CCCCCC" Height="435px" Width="450px">
			    <titles>
				    <asp:Title ShadowColor="32, 0, 0, 0" Font="Trebuchet MS, 14.25pt, style=Bold" ShadowOffset="3" 
				       Name="Title1" ForeColor="26, 59, 105"></asp:Title>
			    </titles>
                <Legends>
                    <asp:Legend Docking="Bottom" IsDockedInsideChartArea="False" LegendStyle="Row" IsEquallySpacedItems="False"></asp:Legend>
                </Legends>
                <Series>
                    <asp:Series Name="Your Goal" ChartType="Column" CustomProperties="DrawingStyle=Cylinder" Color="#FFCC66">                
                    </asp:Series>
                    <asp:Series Name="Your Current Level" CustomProperties="DrawingStyle=Cylinder" Color="#99FF66"></asp:Series>
                    <asp:Series Name="Other ADAPT Participants" CustomProperties="DrawingStyle=Cylinder" Color="#0066FF"></asp:Series>                
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1" BackGradientStyle="TopBottom" BackColor="#FFFF99">
                    <AxisX IsMarginVisible="False" IsMarksNextToAxis="False" IsLabelAutoFit="False" LabelAutoFitStyle="None"> <MajorGrid Enabled="false" /></AxisX>
                    </asp:ChartArea>
                </ChartAreas>
            </asp:Chart>
        </td>
        <td style="width:4%;"><br/></td>
        <td style="width:48%; text-align: center;">
            <asp:Chart ID="chartWeeklyProgress" runat="server" BackGradientStyle="TopBottom" BackColor="#CCCCCC" Height="435px" Width="450px" BorderlineDashStyle="Solid">
                <titles>
				    <asp:Title ShadowColor="32, 0, 0, 0" Font="Trebuchet MS, 14.25pt, style=Bold" ShadowOffset="3" 
				       Name="WeeklyProgress" Text="Weekly Progress" ForeColor="26, 59, 105"></asp:Title>
                </titles>
                <Legends>
                    <asp:Legend Docking="Bottom" IsDockedInsideChartArea="False" LegendStyle="Row" IsEquallySpacedItems="False" Font="Microsoft Sans Serif, 8pt"></asp:Legend>
                </Legends>
                <Series>
                    <asp:Series Name="Your Progress" ChartType="Line">                    
                    </asp:Series>
                    <asp:Series Name="Goal" ChartType="Line">                    
                    </asp:Series>
                    
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1" BackGradientStyle="TopBottom" BackColor="#FFFF99">
                    <AxisX IntervalOffsetType="Auto" IntervalType="Weeks" Interval="1"> <MajorGrid Enabled="false" /></AxisX>
                    </asp:ChartArea>
                </ChartAreas>                
            </asp:Chart>        
        </td>
    </tr>
    </tbody></table>
    </div>
    </form>
</body>
</html>

Open in new window

lapucca

ASKER

Yap, that worked! I thought TextAlign is only for text, haha.