1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to make a text placed center in DIV?

Discussion in 'CSS' started by totally beginner, Jun 13, 2005.

  1. #1
    <DIV>
    xxx
    </DIV>


    how to place text 'xxx' in center of DIV area? help...... :confused:
    oh.....not only horizontal centered, buat also vertical centered...... :eek:
    SEMrush
     
    totally beginner, Jun 13, 2005 IP
    SEMrush
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #2
    <div style="height: 100px; text-align: center; line-height: 100px; border: 1px solid red;">
    centered text
    </div>

    J.D.
     
    J.D., Jun 13, 2005 IP
  3. Corey Bryant

    Corey Bryant Texan at Heart

    Messages:
    1,127
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Corey Bryant, Jun 14, 2005 IP
  4. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Which particular post you find useful in this thread?
     
    J.D., Jun 14, 2005 IP
  5. Corey Bryant

    Corey Bryant Texan at Heart

    Messages:
    1,127
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The one by the_pm well as the one by Pauly discussing the difficulties of vertical alignment - something the questioner was asking abount
     
    Corey Bryant, Jun 14, 2005 IP
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Careful with that thread. One of the posts there uses px as height/width units in HTML, which is no valid HTML. They also discuss how "flawed" vertical-align is. By design, vertical-align is supposed to be used with inline elements to align them vertically along the line box, not to align the content of a block element, like div. It can also be used to align vertically the content of a table cell.

    J.D.
     
    J.D., Jun 14, 2005 IP
  7. Corey Bryant

    Corey Bryant Texan at Heart

    Messages:
    1,127
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Maybe you could join that forum and share some thoughts? I know they would appreciate it
     
    Corey Bryant, Jun 14, 2005 IP
  8. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #8
    Leave him alone, he's ours... ;)
     
    NewComputer, Jun 14, 2005 IP
  9. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I'm already spending way too much time in this one :) When I just started working with CSS, I found vertical-align confusing as well. Here's a little example that shows how it all works:

    <style type="text/css">
    div {border: 1px solid red; background-color: #FEE; font: 10pt Arial, sans-serif; padding: 0; margin: 1em 0;}
    span {border: 1px solid blue; background-color: #EEF; margin: 0; padding: 0;}
    </style>

    <div>
    <b>X</b><span style="vertical-align: top;">top</span>
    <b>X</b><span style="vertical-align: bottom;">bottom</span>
    <b>X</b><span style="vertical-align: middle;">middle</span>
    <span style="vertical-align: baseline;">baseline</span>
    <b>X</b><span style="vertical-align: 25%;">25%</span>
    <b>X</b><span style="vertical-align: 50%;">50%</span>
    <b>X</b><span style="vertical-align: 75%;">75%</span>
    <b>X</b><span style="vertical-align: 100%;">100%</span>
    <b>X</b><span style="vertical-align: text-top;">text-top</span>
    <b>X</b><span style="vertical-align: text-bottom;">text-bottom</span>
    <span style="vertical-align: 50px;">50px</span>
    <span style="vertical-align: 0;">0px</span>
    <span style="vertical-align: -50px;">-50px</span>
    <b>X</b></div>

    Each inline element (span in this case) is aligned according to its baseline.

    Then those that aligned using absolute units (e.g. +/- 50px) are shifted from the baseline by the specified value.

    Each element that is aligned with percentage units is shifted by the number of percent of the element's line height.

    At this point we have a line box (the padding- and margin-less red div outlines it).

    Finally, those elements that have relative positioning, like top or bottom, are shifted to the top or the bottom of the resulting line box.

    Hope that explains vertical-align a bit better.

    J.D.
     
    J.D., Jun 14, 2005 IP
  10. tresman

    tresman Well-Known Member

    Messages:
    235
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    138
    #10
    If you want to be fully centered and use CSS, not inline CSS as someone explains above, you can do something like:

    <div id="mybox">
    My text in mi box
    </div>

    Note that to do the following your text will need to have a fixed and known height and weight. Now the CSS

    #mybox {
    width:200px;
    height:100px;
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-50px; /* Look: this is the half of the height */
    margin-left:-100px; /* and this is the half of the width /*
    }

    This will place just in the horizontal and vertical middle of the page. You have to play with position:relative/absolute dependind on what you need (maybe you have this box inside a box and need the position to relative).

    I hope this helps you. An online example can be found at http://oriera.com/aforo/xhtml/aforoxx.php

    Also please advice that this breaks in non modern browsers as IE4 or Netscape 4.
     
    tresman, Jun 14, 2005 IP
  11. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #11
    The original question was how to center text inside a div, not how to center a div.

    J.D.
     
    J.D., Jun 14, 2005 IP
  12. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #12
    JD,

    You have done all you can... don't expend anymore here. I tried your method right away and it worked.
     
    NewComputer, Jun 14, 2005 IP
  13. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I wasn't disputing the technique - it's a good technique when you want to center a block element on the page :)

    As for the one I quoted in my first reply, one thing I forgot to mention is that line-height is inheritable and if may affect other content of the div. If this is the case, you may need to reset the affected elements' line-height to normal (depends on the actual content).

    J.D.
     
    J.D., Jun 14, 2005 IP
  14. tresman

    tresman Well-Known Member

    Messages:
    235
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    138
    #14
    Sorry, I was not disputing you way, maybe I have explained bad. Yours works, of course.

    However: put the mentioned div inside another div. Or use the tag P or the one that keeps semantics in place. The text hasn't to be there alone. Then you have the text centered in to the box.
     
    tresman, Jun 14, 2005 IP
  15. totally beginner

    totally beginner Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    thanks for the TRICK......hehehe:D
    from your example, i know that the "vertical-align:0 px" can't stand alone.
    this span need another span that use "vertical-align:50 px" or "vertical-align:-50 px".
     
    totally beginner, Jun 22, 2005 IP
  16. zmanish

    zmanish Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    I would like to post a reply / summarize what has been said in the past posts.

    <html>
    <head>
    <title>Vertical Center</title>
    <style>
    body {
    height:100%;
    padding:0px;
    margin:0px;
    }
    table.maintbl{height:100%;width:100%;}
    div.maindiv{vertical-align:middle;}

    </style>
    </head>

    <body>
    <table class="maintbl">
    <tr>
    <td>
    <div class="maindiv">
    <div>
    This text should be vertically centered in most browsers.</br>
    <center>Use &lt;center&gt; - &lt;/center&gt; for horizontal centering.</center>
    </div>
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>


    Please tell me if this does not work in some browsers.
    Man Aga
     
    zmanish, Aug 9, 2005 IP
  17. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Heh heh :)

    I created a DigitalPoint account a long time ago, and I suppose better late than never to add some substance to a thread (our logs are showing a lot of referrals from this thread - I just saw this earlier this evening, hence my tardiness)

    Yeah, that was a case of too much awake time and not enough coffee. Pauly knows better. Thanks for pointing it out. I corrected it. It's so rare that the opportunity presents itself to actually declare height and width outside of a style sheet. We're all so used to declaring units of measurement, it's become second-nature :)

    The "flaw" isn't so much in how it works. It's moreso that there seems to be a gaping hole in the standards when it comes to having certain styles available. Obviously, for the purpose of this thread, vertical-align works swell. For the purpose of the IWDN linked from here, it would not work at all, and unfortunately, neither would any other method short of the horizon method I posted, which in testing appears to be very consistent from browser to browser, and quite valid, of course.

    We've sent along a few suggestions to W3C with ideas for upcoming CSS specs. Collectively, we have a hefty wish list, including the ability to declare multiple backgrounds on a single block-level container in much the same fashion as borders in the current 2.1 spec (no more nesting!), the ability to vertically align a block-level element inside of a larger container, and the ability to do margin/padding "math" - margin:100%-50px - that sort of thing. If anyone wants to give me their wishlist, I'll probably be stopping in on Eric Meyer in the next couple months. So post away (maybe a new thread would be appropriate for this)!
     
    the_pm, Nov 29, 2005 IP
  18. torunforever

    torunforever Peon

    Messages:
    414
    Likes Received:
    36
    Best Answers:
    0
    Trophy Points:
    0
    #18
    5 months tardy. ;)
     
    torunforever, Nov 29, 2005 IP
  19. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #19
    I know. I know. I'm feeling the shame :eek:
     
    the_pm, Nov 29, 2005 IP