vertical centering of text

Discussion in 'HTML' started by google@rbtbowers.com, Mar 8, 2006.

  1. Guest

    When I view the following in a browser window, the text is not
    vertically centered (text is at the top of the window) but in Print
    Preview, the text is vertically centered. How can I have the text
    be centered in both?

    Thanks for your help,
    Robert


    <HTML>
    <HEAD>
    <TITLE>My Web Page</TITLE>
    </HEAD>

    <BODY scroll=yes>

    <div align="center">
    <table height="75%" border="0" bgimage="../pics/frame_back.jpg">
    <tr>
    <td>
    <font size="6"><p align="center">Text Line
    1</p></font><br><br>
    <font size="5"><p align="center">Text Line
    2</p></font><br><br>
    <font size="6"><p align="center">Text Line
    3</p></font><br><br>
    </tr>
    </table>
    </div>

    </BODY>
    </HTML>
     
    , Mar 8, 2006
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed writing in
    news::

    > When I view the following in a browser window, the text is not
    > vertically centered (text is at the top of the window) but in Print
    > Preview, the text is vertically centered. How can I have the text
    > be centered in both?
    >
    > Thanks for your help,
    > Robert
    >
    >


    You need a Doctype declaration - new pages should use Strict.
    <http://www.w3.org/TR/html4/struct/global.html#h-7.2>

    ><HTML>
    > <HEAD>
    > <TITLE>My Web Page</TITLE> </HEAD>
    >
    > <BODY scroll=yes>


    There is no scroll attribute for the Body element.

    >
    > <div align="center">


    Align is deprecated <http://www.w3.org/TR/html4/present/graphics.html#adef-
    align>. Use CSS.

    > <table height="75%" border="0" bgimage="../pics/frame_back.jpg">


    There is no attribute height for the table element
    <http://www.w3.org/TR/html4/struct/tables.html#edef-TABLE>.

    > <tr>
    > <td>
    > <font size="6"><p align="center">Text Line
    > 1</p></font><br><br>


    Font element is deprecated. See above for align attribute. What is the
    purpose of placing two br elements after a p element. Change the margin
    for the p element through CSS.

    > <font size="5"><p align="center">Text Line
    > 2</p></font><br><br>


    <snip rest>

    You will do better using CSS. Try Googling for vertical center css.

    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Mar 8, 2006
    #2
    1. Advertising

  3. Alan Cole Guest

    In article <>,
    wrote:

    > When I view the following in a browser window, the text is not
    > vertically centered (text is at the top of the window) but in Print
    > Preview, the text is vertically centered. How can I have the text
    > be centered in both?
    >
    > Thanks for your help,
    > Robert
    >
    >
    > <HTML>
    > <HEAD>
    > <TITLE>My Web Page</TITLE>
    > </HEAD>
    >
    > <BODY scroll=yes>
    >
    > <div align="center">
    > <table height="75%" border="0" bgimage="../pics/frame_back.jpg">
    > <tr>
    > <td>
    > <font size="6"><p align="center">Text Line
    > 1</p></font><br><br>
    > <font size="5"><p align="center">Text Line
    > 2</p></font><br><br>
    > <font size="6"><p align="center">Text Line
    > 3</p></font><br><br>
    > </tr>
    > </table>
    > </div>
    >
    > </BODY>
    > </HTML>


    VERY old fashioned HTML with lots of errors, but you are missing a </td>
    tag which may sort things out in the browser. Although it is centred in
    my browser.

    Al.

    --
    Alan Cole. E-mail: justal at lineone dot net
    http://www.forces-of-nature.co.uk [Coastal Sports]
    http://www.pixelwave.co.uk [Website Design, hosting and promotion]
     
    Alan Cole, Mar 8, 2006
    #3
  4. Guest

    Here is a version using ccs. Vertical centering is better, but still
    not quite what I want.

    One question I have is why the vertical positioning is different in
    Print Preview in ie6 than in the browser window. The text is much
    higher on the page when printed out than it appears in the browser
    window.

    In response to someone else's question about my original html,
    I am using <br> to vertically position the lines of text relative to
    each other. I put the font size and style in the body rather than
    in the css because I want different styles and sizes of text on
    different lines. If there is a better way to do that, perhaps in the
    css, please let me know how it is best done.

    Also, my background image is cut off at the bottom in the browser
    window, but looks fine when printed out. There are also no scroll
    bars. I realize you don't see my image in the html below, but in
    general, why doesn't the browser take into consideration the vertical
    size of the background image and either adjust the size of the window
    or add scroll bars accordingly?

    Again, thanks for the help,

    Robert

    <HTML>
    <HEAD>
    <TITLE>My Web Page</TITLE>
    <style type="text/css">
    <!--
    body {
    background-color: #FFFFFF;
    margin-top: 27%;
    font-size: 100%;
    background-image: url(../pics/frame_back.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    padding: 0px;
    }
    -->
    </style>
    </HEAD>

    <body>
    <p style="text-align: center; font-family: 'times'; font-style:
    'italic'; font-size: 120%">
    first line of text<br><br><br><br></p>
    <p style="text-align: center; font-family: 'times'; font-style:
    'italic'; font-size: 85%">
    second line of text<br><br><br><br></p>
    <p style="text-align: center; font-family: 'times'; font-size:
    120%">
    third line of text</p>
    </body>
    </HTML>

    Adrienne Boswell wrote:
    > Gazing into my crystal ball I observed writing in
    > news::
    >
    > > When I view the following in a browser window, the text is not
    > > vertically centered (text is at the top of the window) but in Print
    > > Preview, the text is vertically centered. How can I have the text
    > > be centered in both?
    > >
    > > Thanks for your help,
    > > Robert
    > >
    > >

    >
    > You need a Doctype declaration - new pages should use Strict.
    > <http://www.w3.org/TR/html4/struct/global.html#h-7.2>
    >
    > ><HTML>
    > > <HEAD>
    > > <TITLE>My Web Page</TITLE> </HEAD>
    > >
    > > <BODY scroll=yes>

    >
    > There is no scroll attribute for the Body element.
    >
    > >
    > > <div align="center">

    >
    > Align is deprecated <http://www.w3.org/TR/html4/present/graphics.html#adef-
    > align>. Use CSS.
    >
    > > <table height="75%" border="0" bgimage="../pics/frame_back.jpg">

    >
    > There is no attribute height for the table element
    > <http://www.w3.org/TR/html4/struct/tables.html#edef-TABLE>.
    >
    > > <tr>
    > > <td>
    > > <font size="6"><p align="center">Text Line
    > > 1</p></font><br><br>

    >
    > Font element is deprecated. See above for align attribute. What is the
    > purpose of placing two br elements after a p element. Change the margin
    > for the p element through CSS.
    >
    > > <font size="5"><p align="center">Text Line
    > > 2</p></font><br><br>

    >
    > <snip rest>
    >
    > You will do better using CSS. Try Googling for vertical center css.
    >
    > --
    > Adrienne Boswell
    > http://www.cavalcade-of-coding.info
    > Please respond to the group so others can share
     
    , Mar 19, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tomas
    Replies:
    3
    Views:
    801
    Tomas
    Oct 31, 2003
  2. Replies:
    1
    Views:
    505
    Neredbojias
    Mar 28, 2006
  3. Jeff
    Replies:
    1
    Views:
    574
    Alexey Smirnov
    May 15, 2007
  4. Ciaran
    Replies:
    4
    Views:
    645
    Ben C
    May 17, 2007
  5. topal
    Replies:
    0
    Views:
    275
    topal
    Jan 16, 2009
Loading...

Share This Page