vertical centering in css

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

  1. Guest

    I am trying to get text vertically centered on a web page using css.
    My html is below. 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.

    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?

    Thanks in advance 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>
     
    , Mar 27, 2006
    #1
    1. Advertising

  2. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > I am trying to get text vertically centered on a web page using css.
    > My html is below. 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.
    >
    > 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?
    >
    > Thanks in advance for the help,


    http://www.neredbojias.com/zyxix/vcsc/vcsc.html

    Background images are not considered in fluid design.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Mar 28, 2006
    #2
    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:
    791
    Tomas
    Oct 31, 2003
  2. Replies:
    3
    Views:
    4,995
  3. Jeff
    Replies:
    1
    Views:
    569
    Alexey Smirnov
    May 15, 2007
  4. Ciaran
    Replies:
    4
    Views:
    633
    Ben C
    May 17, 2007
  5. topal
    Replies:
    0
    Views:
    263
    topal
    Jan 16, 2009
Loading...

Share This Page