Search code examples
htmlhtml-tablevertical-alignmenttext-align

<td> center body of text but text left align


I know I am missing a simple line fix.

I have tried <td align ="center"> while <p style="text-align:left;"> and vise versa. I have also played with simple align="left" for <p> as well.

How do I make all the text centered in the <td> but the links are left aligned in the center?

enter image description here

So far the text is left align but isn't centered inside the <td>

I also tried adding a centered div as you will see in my code. Didn't work

        <td align="center" width="50%" style = "margin-left:50%">
        <p align="center"><font size="5"><b>Classified Ads</b></font></p>
        <br />

        <div align="center">

        <strong><!--edited 6/10/2015-->
                              <p style="text-align:left;">
                              <a href=".aspx">Search Classified Ads</a></p>                                  
                              <p style="text-align:left;">
                                 <a href=".aspx">Add or Delete Classified Ad</a></p>
                              <p style="text-align:left;">
                                 <a href=".aspx">Update Existing Classified Ad</a></p>
                              <p style="text-align:left;">
                                 <a href=".aspx">All Classified Ads</a></p>

                              <p style="text-align:left;">
                                 <a href=".aspx">About this Application</a></p>
         </strong>

        </div>
                              <p>
                                &nbsp;
                              </p>
                              <p>

                              </p>
                              <p align="center">
                              <strong>

                                    <font size="+1">Note: Classified Ads will expire after 30 days.</font>
                                    <br />
                                    Today&#39;s date is&nbsp;
                                  <asp:Label ID="DateLabel" runat="server"></asp:Label>
                              </strong>

                              </p>

    </td>

UPDATE:

I seem to be explaining what I want wrong. I want it to look like this

enter image description here


Solution

  • <div>
            <p style="text-align:center"><font size="5"><b>Classified Ads</b></font></p>
            <br />
    
            <div style="width:300px; margin: 0 auto;">
    
                <strong><!--edited 6/10/2015-->
                    <p>
                        <a href=".aspx">Search Classified Ads</a></p>                                  
                    <p>
                        <a href=".aspx">Add or Delete Classified Ad</a></p>
                    <p>
                        <a href=".aspx">Update Existing Classified Ad</a></p>
                    <p>
                        <a href=".aspx">All Classified Ads</a></p>
    
                    <p>
                       <a href=".aspx">About this Application</a></p>
                </strong>
    
            </div>
            <p>
            &nbsp;
            </p>
                <p style="text-align:center">
                      <strong>
    
                        <font size="+1">Note: Classified Ads will expire after 30 days.</font>
                        <br />
                        Today&#39;s date is&nbsp;
                    </strong>
    
                </p>
    
    
            </div>
    

    I think it is what you need. First of all, when you use align or text-align it automatically will be used on all child elements. If you want to align elements align only those, which needs it. The second thing is centering. You can center a block by using margin: 0 auto (also you need to define a width otherwise it will not work).

    P.S: I strongly recommend you not to use td outside of table and not to use align attribute. Read this to write a cleaner html: http://learn.shayhowe.com/html-css/