Centering an image with text

[Jerry Camel]

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]

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" <rl*****@msn.com> wrote in message
news:OF*************@TK2MSFTNGP12.phx.gbl...

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]

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:%2****************@TK2MSFTNGP09.phx.gbl...

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" <rl*****@msn.com> wrote in message
news:OF*************@TK2MSFTNGP12.phx.gbl...

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]

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" <rl*****@msn.com> wrote in message
news:%2****************@TK2MSFTNGP15.phx.gbl...

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:%2****************@TK2MSFTNGP09.phx.gbl...

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" <rl*****@msn.com> wrote in message
news:OF*************@TK2MSFTNGP12.phx.gbl...

>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]

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:%2****************@TK2MSFTNGP12.phx.gbl...

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" <rl*****@msn.com> wrote in message
news:%2****************@TK2MSFTNGP15.phx.gbl...

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:%2****************@TK2MSFTNGP09.phx.gbl...

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" <rl*****@msn.com> wrote in message
news:OF*************@TK2MSFTNGP12.phx.gbl...
>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]

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" <rl*****@msn.com> wrote in message
news:ON**************@TK2MSFTNGP14.phx.gbl...

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:%2****************@TK2MSFTNGP12.phx.gbl...

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" <rl*****@msn.com> wrote in message
news:%2****************@TK2MSFTNGP15.phx.gbl...

> 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:%2****************@TK2MSFTNGP09.phx.gbl...
>> 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" <rl*****@msn.com> wrote in message
>> news:OF*************@TK2MSFTNGP12.phx.gbl...
>> >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
>> >
>> >
>>
>>
>
>

[John Timney \(ASP.NET MVP\)]

the code below should work

--
Regards

John Timney
ASP.NET MVP
Microsoft Regional Director

"Jerry Camel" <rl*****@msn.com> wrote in message
news:OF*************@TK2MSFTNGP12.phx.gbl...

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>