PDA

View Full Version : centering images



Bobafart
Oct 19th, 2008, 12:56 PM
I have a PHP script that randomly loads a single image in a <div> container. The randomly loaded images have various widths and heights.

Everytime the image loads with a page refresh I would like the image to be horizontally centered in the div.

Short of using the old fashioned, now considered illegal, <center> tag:


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

How else can this be done?

coothead
Oct 19th, 2008, 01:02 PM
Hi there Bobafart,

try it like this...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
#php_image {
text-align:center;
}
</style>

</head>
<body>

<div id="php_image">
<img src="phpimage.jpg" alt="">
</div>

</body>
</html>

coothead

gnomeontherun
Oct 19th, 2008, 04:24 PM
Even better yet, access the img directly in CSS. The first method above centers anything in the DIV, while this only sets the img to center. It depends on what you want exactly, but whenever you can apply the rule most directly you should.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
#php_image img {
text-align:center;
}
</style>

</head>
<body>

<div id="php_image">
<img src="phpimage.jpg" alt="">
</div>

</body>
</html>

coothead
Oct 19th, 2008, 04:46 PM
Hi there jeremywilken,

I would hazard a guess that you did not bother to test your assertion. ;)

The method that I used, was based on the assumption that there was one div containing just one image.
If the div was to contain other elements or text that did not require centering, then to apply the style
directly to the image would need this coding...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
#php_image img {
display:block;
margin:auto;
}
</style>

</head>
<body>

<div id="php_image">
<img src="phpimage.jpg" alt="">
</div>

</body>
</html>

coothead

gnomeontherun
Oct 19th, 2008, 04:56 PM
You are right, I did not test as you noticed. I really only was focusing on the specificity of the CSS, thanks for the catch.

coothead
Oct 19th, 2008, 05:04 PM
No problem, you're welcome. ;)

seniorson7
Oct 19th, 2008, 09:44 PM
Why is the <center> tag considered illegal? Just curious. I must be behind the times, maybe I'm too much "old school" :)

coothead
Oct 19th, 2008, 09:58 PM
Hi there seniorson7,

and a warm welcome to these forums. ;)

It is not illegal, as such, but rather it is one of many deprecated elements.

http://www.html-reference.com/depreciated.htm
http://www.w3.org/TR/REC-html40/index/elements.html


coothead