browse: forums | FAQ
Connecting Tech Pros Worldwide

Hey there! Do you need HTML / CSS help?

Get answers from our community of HTML / CSS experts on BYTES! It's free.

Centering an image with css

Carolyn Marenger
Guest
 
Posts: n/a
#1: Aug 31 '05
I think this is an easy one, but I have not been able to find it anywhere.

In HTML, I used <center><img src="whatever.gif></center> to horizontally
center a graphic on a page. What is the CSS way of doing the same?

Thanks, Carolyn

----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----



Spartanicus
Guest
 
Posts: n/a
#2: Aug 31 '05

re: Centering an image with css


Carolyn Marenger <cajunk@marenger.com> wrote:
[color=blue]
>In HTML, I used <center><img src="whatever.gif></center> to horizontally
>center a graphic on a page. What is the CSS way of doing the same?[/color]

p{text-align:center}

<p><img src="image.png" alt="alt content here"></p>

--
Spartanicus
Carolyn Marenger
Guest
 
Posts: n/a
#3: Aug 31 '05

re: Centering an image with css


Spartanicus wrote:
[color=blue]
> Carolyn Marenger <cajunk@marenger.com> wrote:
>[color=green]
>>In HTML, I used <center><img src="whatever.gif></center> to horizontally
>>center a graphic on a page. What is the CSS way of doing the same?[/color]
>
> p{text-align:center}
>
> <p><img src="image.png" alt="alt content here"></p>
>[/color]

Thanks!

Carolyn

----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----
Christoph Päper
Guest
 
Posts: n/a
#4: Aug 31 '05

re: Centering an image with css


Carolyn Marenger:[color=blue]
> I think this is an easy one,[/color]

It is.
[color=blue]
> but I have not been able to find it anywhere.[/color]

That's actually hard to believe, how did you search?
Carolyn Marenger
Guest
 
Posts: n/a
#5: Aug 31 '05

re: Centering an image with css


Christoph Päper wrote:
[color=blue]
> Carolyn Marenger:[color=green]
>> I think this is an easy one,[/color]
>
> It is.
>[color=green]
>> but I have not been able to find it anywhere.[/color]
>
> That's actually hard to believe, how did you search?[/color]

Yeah, I know. I found it within a good 30 seconds after I asked here.

Thanks anyway. Carolyn

----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----
James A. Donald
Guest
 
Posts: n/a
#6: Sep 1 '05

re: Centering an image with css


In transitional, I just say align="right", and the image lines up on
the right hand side, and the text flows around the image.

I can easily put the image on the right hand side in strict for
example telling it to float right, but the text does not flow around
the image.


--
http://www.jim.com
Spartanicus
Guest
 
Posts: n/a
#7: Sep 1 '05

re: Centering an image with css


James A. Donald <jamesd@echeque.com> wrote:

Who and what are you responding to?

There is a posting convention in this group: configure your software to
inject an attribution line on top, snip what you are directly responding
to to a minimum, and put your reply beneath it, thus creating an
interspersed message (like this).
[color=blue]
>In transitional[/color]

No-one should be authoring new documents using transitional anymore.
[color=blue]
>, I just say align="right", and the image lines up on
>the right hand side, and the text flows around the image.[/color]

[Browsing up the thread]

What on earth does this have to do with the OPs query?
[color=blue]
>I can easily put the image on the right hand side in strict for
>example telling it to float right, but the text does not flow around
>the image.[/color]

Then you've made a mistake somewhere.

--
Spartanicus
James A. Donald
Guest
 
Posts: n/a
#8: Sep 1 '05

re: Centering an image with css


James A. Donald:[color=blue][color=green]
> > I can easily put the image on the right hand side in strict for
> > example telling it to float right, but the text does not flow around
> > the image.[/color][/color]

On Thu, 01 Sep 2005 06:54:12 GMT, Spartanicus[color=blue]
> Then you've made a mistake somewhere.[/color]

example:

The following works, but is not strict because of the image has the
attribute align=right (among other things)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
</head>

<body>
<h1>Test</h1>
<p><a href="http://www.jim.com/tolerati.htm">Letter
concerning toleration. </a><a
href="http://www.jim.com/tolerati.htm"><img
src="locket.jpg" alt="Locke" align="right"
height="85" width="75"></a>
<P>John Locke argues
that religious persecution is not caused
by differing concepts of the good, but by simple
old fashioned evil - one group seeks power and wealth by using
organized violence to rob and subjugate another group,
same as any other group conflict.
</body>
</html>

The following does not work at all (style="text-align: right;"),
perhaps because an image is not text.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
</head>

<body>
<h1>Test</h1>
<p><a href="http://www.jim.com/tolerati.htm">Letter
concerning toleration. </a><a
href="http://www.jim.com/tolerati.htm"><img
src="locket.jpg" alt="Locke" style="text-align: right;"
height="85" width="75"></a>
<P>John Locke argues
that religious persecution is not caused
by differing concepts of the good, but by simple
old fashioned evil - one group seeks power and wealth by using
organized violence to rob and subjugate another group,
same as any other group conflict.
</body>
</html>

I would like it to look like the transitional does - where the text
flows around the right aligned image.

--
http://www.jim.com
Els
Guest
 
Posts: n/a
#9: Sep 1 '05

re: Centering an image with css


James A. Donald wrote:
[color=blue]
> James A. Donald:[color=green][color=darkred]
>>> I can easily put the image on the right hand side in strict for
>>> example telling it to float right, but the text does not flow around
>>> the image.[/color][/color]
>
> On Thu, 01 Sep 2005 06:54:12 GMT, Spartanicus[color=green]
>> Then you've made a mistake somewhere.[/color]
>
> example:
>
> The following works, but is not strict because of the image has the
> attribute align=right (among other things)[/color]

[...]
[color=blue]
> <img
> src="locket.jpg" alt="Locke" align="right"
> height="85" width="75">[/color]

[...]
[color=blue]
> The following does not work at all (style="text-align: right;"),
> perhaps because an image is not text.[/color]
[color=blue]
> <img
> src="locket.jpg" alt="Locke" style="text-align: right;"
> height="85" width="75">
>
> I would like it to look like the transitional does - where the text
> flows around the right aligned image.[/color]

You're mistake is in thinking that text-align:right is the same as
float:right.

You need to *float* the image right, to make the text flow around it.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Spartanicus
Guest
 
Posts: n/a
#10: Sep 1 '05

re: Centering an image with css


James A. Donald <jamesd@echeque.com> wrote:
[color=blue][color=green][color=darkred]
>> > I can easily put the image on the right hand side in strict for
>> > example telling it to float right, but the text does not flow around
>> > the image.[/color][/color]
>[color=green]
>> Then you've made a mistake somewhere.[/color]
>
>example:[/color]

Don't post code to the group, upload it, post the url.
[color=blue]
>The following does not work at all (style="text-align: right;"),[/color]

Duh, text-align is a different property than float.

--
Spartanicus
Gérard Talbot
Guest
 
Posts: n/a
#11: Sep 8 '05

re: Centering an image with css


Carolyn Marenger a écrit :[color=blue]
> I think this is an easy one, but I have not been able to find it anywhere.
>
> In HTML, I used <center><img src="whatever.gif></center> to horizontally
> center a graphic on a page. What is the CSS way of doing the same?
>
> Thanks, Carolyn
>
> ----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
> http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
> ----= East and West-Coast Server Farms - Total Privacy via Encryption =----[/color]

Using web standards in your webpages:
http://www.mozilla.org/docs/web-deve...her_Deprecated

Gérard
--
remove blah to email me
Closed Thread