Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry span: how to align its text vertically?

    here is code:

    <span style="width:200; height:50; text-align:center; background-color:00ff00;">Hello</span>

    I want to align its text - i.e. Hello - verically in middle, could u help?

    thx





  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,720
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there hello20109876,
    1. you are in the wrong forum.
    2. you are using the wrong element - span.
    3. you have not defined the width and height units.
    4. you have not 'hashed the hex value.


    So try it like this...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    #foo {
        width:200px; 
        line-height:50px; 
        text-align:center; 
        background-color:#0f0;
        color:#000;
    }
    -->
    </style>
    
    </head>
    <body>
    
    <div id="foo">Hello</div>
    
    </body>
    </html>
    
    coothead

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question



    1)if wrong forum, which one should I be?

    2)I use correct element - span.
    div has line-break (br) before and after - it is not suitable for my case.

    my question is:
    span: how to align its text vertically?

    NOT
    div: how to align its text vertically?

    You are trying to change my question.

    modify:
    But your code is valid for span also !!!!!!!!!!!!!!!!!



    .
    Last edited by hello20109876; 05-06-2006 at 06:17 PM.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    you need a HTML forum or book

    <SPAN> is an inline element.
    <DIV> is a block element


    Syntax <SPAN>...</SPAN>
    Attributes common attributes

    Contents Inline elements
    Contained in Inline elements, block-level elements

    The SPAN element is a generic inline container. SPAN carries no structural meaning itself, but it can be used to provide extra structure through its LANG, DIR, CLASS, and ID attributes. Style sheets are often used to suggest a presentation for a given class or ID.

    SPAN should only be used where no other HTML inline element provides a suitable meaning. If a presentation such as bold or italic text would be suitable on visual browsers, authors may prefer to use an appropriate font style element. For example:

    <P><SPAN LANG=fr>La Révolution Tranquille</SPAN> shook Quebec in the early 1960's.
    <P><I LANG=fr>La Révolution Tranquille</I> shook Quebec in the early 1960's.
    These examples are identical in meaning, but the second example uses the I element to suggest italic text.

    DIV is a block-level equivalent of SPAN for containing block-level elements such as P and TABLE.

    More Information
    SPAN in W3C HTML 4.0 Recommendation
    Syntax <DIV>...</DIV>
    Attributes ALIGN=[ left | center | right | justify ] (horizontal alignment)
    common attributes

    Contents Inline elements, block-level elements
    Contained in APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

    The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.

    The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.

    The deprecated ALIGN attribute suggests the horizontal alignment for the content of the division on visual browsers. Possible values are left, right, center, and justify. <CENTER> is a slightly better-supported alias for <DIV ALIGN=center>, though both methods of centering are deprecated in favor of style sheets, which provide greater flexibility in suggesting alignment.

    SPAN is a text-level equivalent of DIV for use within paragraphs and inline elements.

    More Information
    DIV in W3C HTML 4.0 Recommendation
    DIV in W3C HTML 3.2 Recommendation
    DIV in WDG HTML 3.2 Reference
    DIV in Learning HTML 3.2 by Examples
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,720
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there hello20109876,
    if wrong forum, which one should I be?
    Why, when have a basic CSS problem, would you look for a javascript solution.

    my question is:
    span: how to align its text vertically?
    Well, you could set it to display:block; but then, of course, you would have a div.
    You are trying to change my question.
    No, I was attempting to solve your problem.

    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •