Centering an image with text

Discussion in 'ASP .Net' started by Jerry Camel, Sep 23, 2005.

  1. Jerry Camel

    Jerry Camel Guest

    I want to center an image on the screen and have text centered over the
    image. What's the best way to do this?

    I've been playing with style tags and I can get the stuff to center
    automatically OR have the text appear on top of the image. But in the
    second case, the image and text aren't centered properly.

    Any help is appreciated...

    Jerry
     
    Jerry Camel, Sep 23, 2005
    #1
    1. Advertising

  2. Jerry,

    How about adding the text as part of the image on the fly. Check this out:

    http://www.vb-helper.com/howto_net_watermark.html

    --
    Sincerely,

    S. Justin Gengo, MCP
    Web Developer / Programmer

    www.aboutfortunate.com

    "Out of chaos comes order."
    Nietzsche
    "Jerry Camel" <> wrote in message
    news:...
    >I want to center an image on the screen and have text centered over the
    > image. What's the best way to do this?
    >
    > I've been playing with style tags and I can get the stuff to center
    > automatically OR have the text appear on top of the image. But in the
    > second case, the image and text aren't centered properly.
    >
    > Any help is appreciated...
    >
    > Jerry
    >
    >
     
    S. Justin Gengo, Sep 23, 2005
    #2
    1. Advertising

  3. Jerry Camel

    Jerry Camel Guest

    Interesting, but not practical for my purpose..

    Seems it should be something pretty easy to do. Right now I am using an ASP
    panel with a background image. I can cente rthe text horizontally on the
    image, but not vertically. Any idea how to center vertically?


    "S. Justin Gengo" <sjgengo@[no_spam_please]aboutfortunate.com> wrote in
    message news:%...
    > Jerry,
    >
    > How about adding the text as part of the image on the fly. Check this out:
    >
    > http://www.vb-helper.com/howto_net_watermark.html
    >
    > --
    > Sincerely,
    >
    > S. Justin Gengo, MCP
    > Web Developer / Programmer
    >
    > www.aboutfortunate.com
    >
    > "Out of chaos comes order."
    > Nietzsche
    > "Jerry Camel" <> wrote in message
    > news:...
    > >I want to center an image on the screen and have text centered over the
    > > image. What's the best way to do this?
    > >
    > > I've been playing with style tags and I can get the stuff to center
    > > automatically OR have the text appear on top of the image. But in the
    > > second case, the image and text aren't centered properly.
    > >
    > > Any help is appreciated...
    > >
    > > Jerry
    > >
    > >

    >
    >
     
    Jerry Camel, Sep 23, 2005
    #3
  4. All of the examples I've found place the image as a background image like
    you've done, but they are using a div tag instead of panel. That shouldn't
    matter I think.

    Then they use a separate div for the text and place it with another class.
    The final code is like this:

    div#test {
    background-image: url(/images/backgroundimage.JPG);
    background-repeat: no-repeat;
    height: 500px;
    width: 380px;
    }

    <div id="test">Superimposed Text</div>

    If the text positioning relative to the image is simple, you could add any
    necessary text formatting to the div#test style and use the padding-top and
    padding-left attributes to position the text in the <div>. On the other
    hand, if you need more control over text positioning, or the text consists
    of multiple lines and paragraphs, you can nest the text within another
    <div>, like this:
    div#testtext {
    position: relative;
    height: auto;
    width: auto;
    left: 25px;
    top: 200px;
    }

    <div id="test"><div id="testtext">Superimposed Text</div></div>




    --
    Sincerely,

    S. Justin Gengo, MCP
    Web Developer / Programmer

    www.aboutfortunate.com

    "Out of chaos comes order."
    Nietzsche
    "Jerry Camel" <> wrote in message
    news:%...
    > Interesting, but not practical for my purpose..
    >
    > Seems it should be something pretty easy to do. Right now I am using an
    > ASP
    > panel with a background image. I can cente rthe text horizontally on the
    > image, but not vertically. Any idea how to center vertically?
    >
    >
    > "S. Justin Gengo" <sjgengo@[no_spam_please]aboutfortunate.com> wrote in
    > message news:%...
    >> Jerry,
    >>
    >> How about adding the text as part of the image on the fly. Check this
    >> out:
    >>
    >> http://www.vb-helper.com/howto_net_watermark.html
    >>
    >> --
    >> Sincerely,
    >>
    >> S. Justin Gengo, MCP
    >> Web Developer / Programmer
    >>
    >> www.aboutfortunate.com
    >>
    >> "Out of chaos comes order."
    >> Nietzsche
    >> "Jerry Camel" <> wrote in message
    >> news:...
    >> >I want to center an image on the screen and have text centered over the
    >> > image. What's the best way to do this?
    >> >
    >> > I've been playing with style tags and I can get the stuff to center
    >> > automatically OR have the text appear on top of the image. But in the
    >> > second case, the image and text aren't centered properly.
    >> >
    >> > Any help is appreciated...
    >> >
    >> > Jerry
    >> >
    >> >

    >>
    >>

    >
    >
     
    S. Justin Gengo, Sep 23, 2005
    #4
  5. Jerry Camel

    Jerry Camel Guest

    The padding is the key... Not really a solution for true vertical
    centering, but the text is static so the padding works in this case. Thanks
    for your insight.

    Jerry


    "S. Justin Gengo" <sjgengo@[no_spam_please]aboutfortunate.com> wrote in
    message news:%...
    > All of the examples I've found place the image as a background image like
    > you've done, but they are using a div tag instead of panel. That shouldn't
    > matter I think.
    >
    > Then they use a separate div for the text and place it with another class.
    > The final code is like this:
    >
    > div#test {
    > background-image: url(/images/backgroundimage.JPG);
    > background-repeat: no-repeat;
    > height: 500px;
    > width: 380px;
    > }
    >
    > <div id="test">Superimposed Text</div>
    >
    > If the text positioning relative to the image is simple, you could add any
    > necessary text formatting to the div#test style and use the padding-top

    and
    > padding-left attributes to position the text in the <div>. On the other
    > hand, if you need more control over text positioning, or the text consists
    > of multiple lines and paragraphs, you can nest the text within another
    > <div>, like this:
    > div#testtext {
    > position: relative;
    > height: auto;
    > width: auto;
    > left: 25px;
    > top: 200px;
    > }
    >
    > <div id="test"><div id="testtext">Superimposed Text</div></div>
    >
    >
    >
    >
    > --
    > Sincerely,
    >
    > S. Justin Gengo, MCP
    > Web Developer / Programmer
    >
    > www.aboutfortunate.com
    >
    > "Out of chaos comes order."
    > Nietzsche
    > "Jerry Camel" <> wrote in message
    > news:%...
    > > Interesting, but not practical for my purpose..
    > >
    > > Seems it should be something pretty easy to do. Right now I am using an
    > > ASP
    > > panel with a background image. I can cente rthe text horizontally on

    the
    > > image, but not vertically. Any idea how to center vertically?
    > >
    > >
    > > "S. Justin Gengo" <sjgengo@[no_spam_please]aboutfortunate.com> wrote in
    > > message news:%...
    > >> Jerry,
    > >>
    > >> How about adding the text as part of the image on the fly. Check this
    > >> out:
    > >>
    > >> http://www.vb-helper.com/howto_net_watermark.html
    > >>
    > >> --
    > >> Sincerely,
    > >>
    > >> S. Justin Gengo, MCP
    > >> Web Developer / Programmer
    > >>
    > >> www.aboutfortunate.com
    > >>
    > >> "Out of chaos comes order."
    > >> Nietzsche
    > >> "Jerry Camel" <> wrote in message
    > >> news:...
    > >> >I want to center an image on the screen and have text centered over

    the
    > >> > image. What's the best way to do this?
    > >> >
    > >> > I've been playing with style tags and I can get the stuff to center
    > >> > automatically OR have the text appear on top of the image. But in

    the
    > >> > second case, the image and text aren't centered properly.
    > >> >
    > >> > Any help is appreciated...
    > >> >
    > >> > Jerry
    > >> >
    > >> >
    > >>
    > >>

    > >
    > >

    >
    >
     
    Jerry Camel, Sep 23, 2005
    #5
  6. Jerry,

    You're welcome. Happy coding!

    --
    Sincerely,

    S. Justin Gengo, MCP
    Web Developer / Programmer

    www.aboutfortunate.com

    "Out of chaos comes order."
    Nietzsche
    "Jerry Camel" <> wrote in message
    news:...
    > The padding is the key... Not really a solution for true vertical
    > centering, but the text is static so the padding works in this case.
    > Thanks
    > for your insight.
    >
    > Jerry
    >
    >
    > "S. Justin Gengo" <sjgengo@[no_spam_please]aboutfortunate.com> wrote in
    > message news:%...
    >> All of the examples I've found place the image as a background image like
    >> you've done, but they are using a div tag instead of panel. That
    >> shouldn't
    >> matter I think.
    >>
    >> Then they use a separate div for the text and place it with another
    >> class.
    >> The final code is like this:
    >>
    >> div#test {
    >> background-image: url(/images/backgroundimage.JPG);
    >> background-repeat: no-repeat;
    >> height: 500px;
    >> width: 380px;
    >> }
    >>
    >> <div id="test">Superimposed Text</div>
    >>
    >> If the text positioning relative to the image is simple, you could add
    >> any
    >> necessary text formatting to the div#test style and use the padding-top

    > and
    >> padding-left attributes to position the text in the <div>. On the other
    >> hand, if you need more control over text positioning, or the text
    >> consists
    >> of multiple lines and paragraphs, you can nest the text within another
    >> <div>, like this:
    >> div#testtext {
    >> position: relative;
    >> height: auto;
    >> width: auto;
    >> left: 25px;
    >> top: 200px;
    >> }
    >>
    >> <div id="test"><div id="testtext">Superimposed Text</div></div>
    >>
    >>
    >>
    >>
    >> --
    >> Sincerely,
    >>
    >> S. Justin Gengo, MCP
    >> Web Developer / Programmer
    >>
    >> www.aboutfortunate.com
    >>
    >> "Out of chaos comes order."
    >> Nietzsche
    >> "Jerry Camel" <> wrote in message
    >> news:%...
    >> > Interesting, but not practical for my purpose..
    >> >
    >> > Seems it should be something pretty easy to do. Right now I am using
    >> > an
    >> > ASP
    >> > panel with a background image. I can cente rthe text horizontally on

    > the
    >> > image, but not vertically. Any idea how to center vertically?
    >> >
    >> >
    >> > "S. Justin Gengo" <sjgengo@[no_spam_please]aboutfortunate.com> wrote in
    >> > message news:%...
    >> >> Jerry,
    >> >>
    >> >> How about adding the text as part of the image on the fly. Check this
    >> >> out:
    >> >>
    >> >> http://www.vb-helper.com/howto_net_watermark.html
    >> >>
    >> >> --
    >> >> Sincerely,
    >> >>
    >> >> S. Justin Gengo, MCP
    >> >> Web Developer / Programmer
    >> >>
    >> >> www.aboutfortunate.com
    >> >>
    >> >> "Out of chaos comes order."
    >> >> Nietzsche
    >> >> "Jerry Camel" <> wrote in message
    >> >> news:...
    >> >> >I want to center an image on the screen and have text centered over

    > the
    >> >> > image. What's the best way to do this?
    >> >> >
    >> >> > I've been playing with style tags and I can get the stuff to center
    >> >> > automatically OR have the text appear on top of the image. But in

    > the
    >> >> > second case, the image and text aren't centered properly.
    >> >> >
    >> >> > Any help is appreciated...
    >> >> >
    >> >> > Jerry
    >> >> >
    >> >> >
    >> >>
    >> >>
    >> >
    >> >

    >>
    >>

    >
    >
     
    S. Justin Gengo, Sep 23, 2005
    #6
  7. the code below should work

    --
    Regards

    John Timney
    ASP.NET MVP
    Microsoft Regional Director

    "Jerry Camel" <> wrote in message
    news:...
    >I want to center an image on the screen and have text centered over the
    > image. What's the best way to do this?
    >
    > I've been playing with style tags and I can get the stuff to center
    > automatically OR have the text appear on top of the image. But in the
    > second case, the image and text aren't centered properly.
    >
    > Any help is appreciated...
    >
    > Jerry
    >
    >



    <%@ Page Language="C#" Debug="true" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    <title>Dead Centre Controls Example</title>
    <style type="text/css" media="screen"><!--
    body
    {
    color: white;
    background-color: white;
    margin: 0px
    }

    #horizon
    {
    color: white;
    background-color: transparent;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
    }

    #content
    {
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: transparent;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    width: 250px;
    height: 70px;
    visibility: visible
    }

    ..bodytext
    {
    font-size: 14px
    }

    ..headline
    {
    font-weight: bold;
    font-size: 24px
    }

    #footer
    {
    font-size: 11px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 20px;
    visibility: visible;
    display: block
    }

    a:link, a:visited
    {
    color: #06f;
    text-decoration: none
    }

    a:hover
    {
    color: red;
    text-decoration: none
    }

    --></style>
    </head>

    <body>
    <div id="horizon">
    <div id="content">
    <div class="bodytext">

    <body>

    <form runat="server">


    <asp:panel id="Panel1" runat="server"
    style="padding:15,15,15,15;
    background-color:red;
    border-color:black;border-width:1;
    border-style:solid">

    <asp:Label id="Label1"
    Text="Some Centered Controls"
    Font-Name="verdana"
    Font-Size="12"
    runat="server"/>

    </asp:panel>
    </form>


    </div>
    </div>
    </div>

    </body>

    </html>
     
    John Timney \(ASP.NET MVP\), Sep 23, 2005
    #7
    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. Richard

    Re: Centering image on page?

    Richard, Jun 25, 2003, in forum: HTML
    Replies:
    0
    Views:
    3,789
    Richard
    Jun 25, 2003
  2. Jerry Muelver

    Re: Centering image on page?

    Jerry Muelver, Jun 25, 2003, in forum: HTML
    Replies:
    0
    Views:
    850
    Jerry Muelver
    Jun 25, 2003
  3. mr_vocab
    Replies:
    4
    Views:
    722
    mr_vocab
    May 24, 2004
  4. Samuël van Laere

    Image centering

    Samuël van Laere, Dec 5, 2004, in forum: HTML
    Replies:
    4
    Views:
    541
    David Dorward
    Dec 5, 2004
  5. Steve Greenaway

    Something about image centering

    Steve Greenaway, Dec 5, 2004, in forum: HTML
    Replies:
    3
    Views:
    419
    David Dorward
    Dec 5, 2004
Loading...

Share This Page