How can I have content in a table cell centered?

Posted on 2011-04-23
Last Modified: 2012-05-11
Hi, I'm using 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.
Question by:lapucca
    LVL 18

    Accepted Solution

    Use the"text-align:center;" property for the cell.
    LVL 17

    Expert Comment

    by: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=, 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" "">
    <html xmlns="">
    <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;} 
        <form id="form1" runat="server">
        <div class="centerer">
        <table id="tblChart" runat="server">
        <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">
    				    <asp:Title ShadowColor="32, 0, 0, 0" Font="Trebuchet MS, 14.25pt, style=Bold" ShadowOffset="3" 
    				       Name="Title1" ForeColor="26, 59, 105"></asp:Title>
                        <asp:Legend Docking="Bottom" IsDockedInsideChartArea="False" LegendStyle="Row" IsEquallySpacedItems="False"></asp:Legend>
                        <asp:Series Name="Your Goal" ChartType="Column" CustomProperties="DrawingStyle=Cylinder" Color="#FFCC66">                
                        <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>                
                        <asp:ChartArea Name="ChartArea1" BackGradientStyle="TopBottom" BackColor="#FFFF99">
                        <AxisX IsMarginVisible="False" IsMarksNextToAxis="False" IsLabelAutoFit="False" LabelAutoFitStyle="None"> <MajorGrid Enabled="false" /></AxisX>
            <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">
    				    <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>
                        <asp:Legend Docking="Bottom" IsDockedInsideChartArea="False" LegendStyle="Row" IsEquallySpacedItems="False" Font="Microsoft Sans Serif, 8pt"></asp:Legend>
                        <asp:Series Name="Your Progress" ChartType="Line">                    
                        <asp:Series Name="Goal" ChartType="Line">                    
                        <asp:ChartArea Name="ChartArea1" BackGradientStyle="TopBottom" BackColor="#FFFF99">
                        <AxisX IntervalOffsetType="Auto" IntervalType="Weeks" Interval="1"> <MajorGrid Enabled="false" /></AxisX>

    Open in new window


    Author Closing Comment

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

    Featured Post

    Course: CSS Specialist

    We don’t have to sell you on the idea of becoming a developer. If you’re you here, you already know it’s one of the most lucrative (and fastest growing) career tracks out there. It’s CSS that allows you to set yourself apart from other web and mobile developers.

    Join & Write a Comment

    Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now