Aligning an image to the centre using php.

DJMK4 · 12 Apr 2006 at 11:40

Iv got this output..But i need to centralise the image, for some reason i cant get it working..

echo '<div align="left" class="product">';
echo "Catagory: $catagory 
Title: $title 
 Certificate: $certificate 
Price: £$price ";
echo '<img src='.$image.' />'; //<<<HERE<<<<
echo "</div>";

iv tried

echo '<img align ="center" src='.$image.' />';

and

echo '<img align ='center' src='.$image.' />';

Iv also tried aligning the div to the centre but it takes all the text aswel...

nav... · 12 Apr 2006 at 12:03

php is not html.

php produces html.

html structures your page.

css styles it and provides the browser with a set of rules for displaying the html.

DJMK4 · 12 Apr 2006 at 12:18

So it has to be done in the css file?? so why can i align the image with php the same way i aligned the div??

nav... · 12 Apr 2006 at 12:43

argh, read it again. I was pointing out the differences in web concepts for you.

you're using php to write html to the page. which with css, is what yuo will use to align the image. php plays no part in it apart from dynamically writing the html for you.

MastermindUK · 12 Apr 2006 at 14:16

echo '<img style="margin: 0 auto;" src="'.$image.'" />'; ?

Conrad11 · 12 Apr 2006 at 14:35

Hi there,

You can't have the align property for an image in HTML. You have to put in the a paragraph so it would be something like:

Code:

<?php

echo '
<p align="center">
	<img src="' . $image . '" alt="" />
</p>
';

?>

Or you can have a style for it in your CSS IIRC.

Thanks....

robmiller · 12 Apr 2006 at 15:33

Images are inline. You're thinking about aligning the wrong way; you apply the aligning to the parent element, and its contents (in this case your image) are aligned accordingly.

You can, however, bodge together a "cheaper" version:

Code:

<div id="foo">
    <img src="foo.png" alt="Foo!" />
</div>

Code:

#foo { text-align:center; }
#foo img { display:block; margin:0 auto; }
/* If you want the text to display normally: */
#foo * { text-align:left; }