<img> element - positioning at center

jswebdev · #1 (**permalink**) Sep 20th, 2005, 08:41

i'm not positive because it's easy to get so many rules confuzed at times, but i think the <align="center"> tag is deprecated in XHTML, correct?

how then would you align an image center?

i've tried the following

Code: Select all

img {display: block;
	margin: 0;
	text-align: center;
}

which to my surprise (because it's usually the other way around) this styles my <img> in IE6 so that it is centered on the page, however, using the same stylesheet, and viewing the same page (everything is the same) with Firefox, my <img> is NOT aligned center, but rests at the left as if i had applied no style.

any ideas on how to get around this?
the (x)html looks like this:

Code: Select all

<html>
<head>
<....>
<body>
<javascript showing print page button>


textual description of the image</p>


<img ... /></p>
</body>
</html>

i have also tried the following CSS, which didn't work either, but i thought that if the <img> is a first child of

, then it might work

Code: Select all

img:first-child {
	display:block;
	margin: 0;
	text-align: center;
}

i appreciate any advice, or ideas which might help me to get that image to rest in the center of the page. i have several "java-pop-up" windows w/ images in each, and these are the images which i am trying to style. i already made a TON of these pages, thinking that my CSS was goign to align the <img>, but now that i'm having problems, im frustrated because i may have to modify code in SO MANY pages.

thanks!

RaptorRex · #2 (**permalink**) Sep 21st, 2005, 03:17

First off, don't count on IExplorer. It does not follow the CSS standards. Write using FireFox, then check that it works in IE, not the other way around.

That said...<img> is a replaced element. It does not contain text so text-align in it is useless. Except in IE which doesn't follow the specifications for CSS.

To center an image, put the <img> in a block that has text-align:center.

<div style="text-align:center"><img src....></div>

jpmitchell · #3 (**permalink**) Sep 21st, 2005, 17:07

What raptor says will work, although I would externalize the style. It makes for cleaner code and better SEO.

Put this in your CSS:

Code: Select all

.center {
  text-align: center;
}

And then put this in your HTML:

Code: Select all

<div class="center"><img src... /></div>

There is also another alternative which would put the same style to all images within a certain div tag (see below).

Put this in your CSS:

Code: Select all

#center img {
  text-align: center;
}

Then your HTML should look like this:

Code: Select all

<div id="center">
  

some text, yadda yadda</p>
  <img src... />
  

 more text here, etc... </p>
</div>

You see the benefit to doing that is you can control several elements within a div tag. That way you are not stuck using class="" for everything. You could easily control the paragraph tag, list tags, or anything you want!

Be creative, and most importantly make it easy to update!

jswebdev · #4 (**permalink**) Sep 21st, 2005, 17:41

thanks for the reply! i don't know why i didn't think to just try a div! couldn't see the forest for all those darn trees, i guess.

doesn't {display: block;} cause the replaced element to be treated as a block-level element?

Quote:

Originally Posted by RaptorRex

First off, don't count on IExplorer. It does not follow the CSS standards. Write using FireFox, then check that it works in IE, not the other way around.

in my opinion, the best practice for development regarding style, which i follow to the best of my ability (and knowledge), is to code using valid XHTML, and CSS. then once the documents are finished, they should be tested for cross-browser compatibility. when an inconsistency is found in the presentation by different browsers, the code should be modified with the orginal goal in mind-- cross browser compatibility-- while the developer may be more pleased with the way one browser handles the presentation, vs the other, he or she mustn't let his or her own preference influence the design. if necessary, then two different stylesheets should be used, and selected via browser detection. IE is, afterall, the most popular browser on the planet. to develop style without giving equal consideration to all browsers doesn't really make sense.

supposing i were to do as you suggest, and that is to write using Firefox-- what is the idea behind that approach? what would you propose is the benefit? is there some way in which that approach would improve my code, or cross-browser compatibility?

jswebdev · #5 (**permalink**) Sep 21st, 2005, 17:49

Quote:

Originally Posted by DSMag

And then put this in your HTML:

Code: Select all

<div class="center"><img src... /></div>

There is also another alternative which would put the same style to all images within a certain div tag (see below).

Put this in your CSS:

Code: Select all

#center img {
  text-align: center;
}

Then your HTML should look like this:

Code: Select all

<div id="center">
  

some text, yadda yadda</p>
  <img src... />
  

 more text here, etc... </p>
</div>

You see the benefit to doing that is you can control several elements within a div tag. That way you are not stuck using class="" for everything. You could easily control the paragraph tag, list tags, or anything you want!

Thanks for the reply!

i'm not sure i understand the difference here-- other than the obvious which is the use of an ID instead of a class selector. in both cases, you are using the attribute in the <div> tag-- wouldn't they both then apply the {text-align: center;} declaration?

i don't claim to be an expert by any means... whch you might have quessed!

EDIT:
here's the extent of the code on each of the pages which have the image which i want to have centered. i have very many pages nearly identical to this, each of which correponds to a unique item number. in other words, i don't plan to go back and edit all of those html files. i would sooner settle for a left-aligned image for this, a simple pricelist for our vendors which sell our product-- it is not an end-user document, but nonetheless, i'd like to learn what i can while doing it, hence my inquiry here.

Code: Select all

<body>
<input type="button" value="Print This Page" onClick="window.print()" class="but" />
<p class="pages">Item #1234567 - Mini widget holder. Mounts both gadgets and widgets.</p>


[img]1234567.JPG[/img]</p>

</body>

thanks again!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
an element positioning question	pesho318i	Web Page Design	5	Dec 21st, 2007 09:02
help on removing element using yui	shotokan99	JavaScript Forum	1	Aug 31st, 2007 13:42
How To Fix <TD> Element Size?	ivan	Web Page Design	6	Dec 11th, 2005 18:43
using params in xsl IF element	zzqproject	Other Programming Languages	0	Nov 21st, 2005 23:12
XHTML Block Element in an Inline Element	gohankid77	Web Page Design	6	Jul 27th, 2004 10:15

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
<img> element - positioning at center