using label tag to center text

Discussion in 'CSS' started by tirso, Dec 15, 2008.

0
  1. #1
    hi to all

    I know this is simple but I am a newbie using css, I have used table and inside td tag I used label tag but using css I want to center the text of label tag. thanks in advance

    Tirso

    <div id="formdiv">
  <div id="add_purchases">
    <table width="100%" border="1" cellspacing="0" cellpadding="0" class="addpurchasestable">
      <tr>
        <td width="7%"><label for="suppliername">SUPPLIER NAME</label></td>
        <td width="8%"><label for="suppliertype">SUPPLIER TYPE</label></td>
        <td width="5%"><label for="date">DATE</label></td>
        <td width="8%"><label for="invoice">INVOICE #</label></td>
       </tr>
    </table>
  </div>
</div>
    HTML:
    my css

    #formdiv {
    margin-left: 0px;
    margin-top: 10px;
    color: #000000;
    }

    #formdiv #add_purchases .addpurchasestable{
    width: 100%;
    margin-top: 20px;
    }
    #formdiv #add_purchases .addpurchasestable label{
    text-align: center;
    width: 40px;
    font-weight: bold;
    }
     
    tirso, Dec 15, 2008 IP
  2. freelancerguy

    freelancerguy Banned

    Messages:
    102
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi

    In your css you have set width 40px for label and td width set to 4%. means your actually td with is 4%.

    Please check the following code.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style type="Text/css">
    #formdiv {
    margin-left: 0px;
    margin-top: 10px;
    color: #000000;
    }

    #formdiv #add_purchases .addpurchasestable{
    width: 100%;
    margin-top: 20px;
    }
    #formdiv #add_purchases .addpurchasestable label{
    text-align: center;
    width: 240px;
    font-weight: bold;
    }

    </style>
    </HEAD>

    <BODY>
    <div id="formdiv">
    <div id="add_purchases">
    <table width="100%" border="1" cellspacing="0" cellpadding="0" class="addpurchasestable">
    <tr>
    <td ><label for="suppliername">SUPPLIER NAME</label></td>
    <td ><label for="suppliertype">SUPPLIER TYPE</label></td>
    <td ><label for="date">DATE</label></td>
    <td ><label for="invoice">INVOICE #</label></td>
    </tr>
    </table>
    </div>
    </div>
    </BODY>
    </HTML>
     
    freelancerguy, Dec 15, 2008 IP
  3. tirso

    tirso Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    hi freelancerguy

    thank you for your immediate reply, it works perfectly but why if I add some columns and change the width of label css into 60px it does not center anymore. When I stick to 240px width it will works on a center. But I need to change the width because it will take too long page on the browser.

    #formdiv #add_purchases .addpurchasestable label{
    text-align: center;
    width: 60px;
    font-weight: bold;
    }

    <div id="formdiv">
  <div id="add_purchases">
    <table width="100%" border="1" cellspacing="0" cellpadding="0" class="addpurchasestable">
      <tr>
        <td><label>SUPPLIER NAME</label></td>
        <td><label>SUPPLIER TYPE</label></td>
        <td><label>DATE</label></td>
        <td><label>INVOICE #</label></td>
        <td><label>DR #</label></td>
        <td><label>REC. DATE</label></td>
        <td><label>ITEM</label></td>
        <td><label>DESCRIPTION</label></td>
        <td><label>ACCOUNT CLASS.</label></td>
        <td><label>DEPARTMENT</label></td>
        <td><label>QTY</label></td>
        <td><label>U/P</label></td>
        <td><label>AMOUNT $</label></td>
        <td><label>RATE</label></td>
        <td><label>AMOUNT P</label></td>
        <td><label>DATE FROM</label></td>
        <td><label>DATE TO</label></td>
      </tr>
    </table>
  </div>
</div>
    HTML:
     
    tirso, Dec 15, 2008 IP
  4. mahendra rajeshirke

    mahendra rajeshirke Active Member

    Messages:
    402
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #4
    hey its not fit in center , we shuld give td
    <td align="center">

    try it out
     
    mahendra rajeshirke, Dec 15, 2008 IP
  5. tirso

    tirso Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    hi mahendra,

    yes it works if i change it in td tag, but if I change td, all my td tag was change unless I will change it specifically. is there no other way if using label tag to center that text?

    thank you

    Tirso
     
    tirso, Dec 15, 2008 IP
  6. PixelRaider

    PixelRaider Banned

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    If I understand you correctly, you're trying to center align the text inside of label tag?

    You could try this:

    CSS:
    .label-text {
   text-align: center;
}
    Code (markup):
    HTML:
    <label for="xyz" class="label-text">abc</label>
    Code (markup):
    Untested as I currently don't have access to Dreamweaver. Let me know how it goes.
     
    PixelRaider, Dec 16, 2008 IP
  7. freelancerguy

    freelancerguy Banned

    Messages:
    102
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Because the text will fit to 60px. So that alignment property can't apply for this.

     
    freelancerguy, Dec 16, 2008 IP
  8. mahendra rajeshirke

    mahendra rajeshirke Active Member

    Messages:
    402
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #8
    mahendra rajeshirke, Dec 16, 2008 IP