13 replies [Last post]
inki
inki's picture
Offline
Regular
Last seen: 16 years 44 weeks ago
Timezone: GMT+5.5
Joined: 2006-04-03
Posts: 13
Points: 0

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

aligning images inline help

1. There's no float: center.
2. I don't really understand what you're asking.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

inki
inki's picture
Offline
Regular
Last seen: 16 years 44 weeks ago
Timezone: GMT+5.5
Joined: 2006-04-03
Posts: 13
Points: 0

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>

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 10 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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;" />

Verschwindende wrote:
  • CSS doesn't make pies

inki
inki's picture
Offline
Regular
Last seen: 16 years 44 weeks ago
Timezone: GMT+5.5
Joined: 2006-04-03
Posts: 13
Points: 0

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?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 10 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

inki
inki's picture
Offline
Regular
Last seen: 16 years 44 weeks ago
Timezone: GMT+5.5
Joined: 2006-04-03
Posts: 13
Points: 0

aligning images inline help

Quote:
1. There's no float: center.

so, how to center an image that works in both ie and firefox? :?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 10 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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.

Verschwindende wrote:
  • CSS doesn't make pies

inki
inki's picture
Offline
Regular
Last seen: 16 years 44 weeks ago
Timezone: GMT+5.5
Joined: 2006-04-03
Posts: 13
Points: 0

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

inki
inki's picture
Offline
Regular
Last seen: 16 years 44 weeks ago
Timezone: GMT+5.5
Joined: 2006-04-03
Posts: 13
Points: 0

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

aligning images inline help

You didn't read what I wrote properly. I said text-align: centre on the container holding the image.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

inki
inki's picture
Offline
Regular
Last seen: 16 years 44 weeks ago
Timezone: GMT+5.5
Joined: 2006-04-03
Posts: 13
Points: 0

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?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 10 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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.

Verschwindende wrote:
  • CSS doesn't make pies