Thu, 2006-04-20 11:35
Ok, now i want to align image to either left or right or center. And i could do it using
float: left; OR float: right; OR float: center;
the above thing will go in the css. but i want to put it inline ie., near the html. what should i do?
any idea? :? thank u for ur replies.
Thu, 2006-04-20 11:40
#1
aligning images inline help
1. There's no float: center.
2. I don't really understand what you're asking.
Thu, 2006-04-20 11:44
#2
aligning images inline help
I wanna align images either left or right using css but i would prefer the css coding to be part of the image tag or near it. i cannot afford to put it between
<style type=text/css> --- </style>
Thu, 2006-04-20 12:26
#3
aligning images inline help
Why can't you put it in the CSS?
The way to do it inline (bad) is:
<img src="blah.gif" style="float: left;" />
Thu, 2006-04-20 13:42
#4
aligning images inline help
becoz i use blogspot. when i change the template all the css i have added goes out. if i use inline it will stay with the post.
thanx for the code.
why do you say inline is bad? will it show errors while validating the page?
Thu, 2006-04-20 13:52
#5
aligning images inline help
No, it will validate fine, it's just easier to have the css file somewhere else and reference all hings to it.
But don't worry, use inline if you have to 
Thu, 2006-04-20 16:28
#6
aligning images inline help
Quote:
1. There's no float: center.
so, how to center an image that works in both ie and firefox? :?
Thu, 2006-04-20 17:13
#7
aligning images inline help
Can we see the rest of the HTML?
This:
<img src="image.jpg" style="margin: auto;" />
will center it in Firefox, Opera etc, but not IE.
We need to see the rest of the code to help you with IE.
Fri, 2006-04-21 05:02
#8
aligning images inline help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <img src="http://www.humboldt.edu/~cllc/images/mountain.jpg" width="414" height="213" alt="" style="margin: auto;" /> </body> </html>
The image does not get centered.
Fri, 2006-04-21 05:41
#9
aligning images inline help
That's because an image is an inline, not a block element. To centre an image, use text-align: center on the container of the image.
Fri, 2006-04-21 06:09
#10
aligning images inline help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <img src="http://www.humboldt.edu/~cllc/images/mountain.jpg" style="text-align:center;" alt="mountains" width="414" height="213" /> </body> </html>
Even text align center does not center the image. u can see in the page by saving above code as a html file.
Fri, 2006-04-21 06:22
#11
aligning images inline help
You didn't read what I wrote properly. I said text-align: centre on the container holding the image.
Fri, 2006-04-21 06:30
#12
aligning images inline help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css"><!--
.imgs{
margin: 0 auto;
width: 500px;
text-align: center;
}
--></style>
</head>
<body>
<div style="text-align:center;">
<img src="http://www.humboldt.edu/~cllc/images/mountain.jpg" alt="mountains" width="414" height="213" />
</div>
</body>
</html>
Yes, now the image is centered and it validates too. is this what u said know?
Fri, 2006-04-21 08:00
#13
aligning images inline help
Sort of.
You can do away with the div, and add those styles into the <body> tag; HOWEVER, this will result in all text being centred too.