While I’m trying to build List Central, I have also, slowly, been designing another blog called Urpi’s Dream. I have a long term vision for Urpi’s Dream, and while I know that I won’t be able to devote too much time to it during the reign of List Central, on occasion I get completely obsessed with certain aspects of this other project.
One of these obsessions was to build a new WordPress plugin to hold the specific functionality I want in a image gallery. Yes, I built, yet another, WordPress Image Gallery Plugin. I know there are many others out there that do the job, but none that did it to my satisfaction, so I built my own. I still have a few more touch ups to do on Urpi Gallery, but once those are completed, I’ll be releasing the plugin to the WordPress community. I’ll likely make an announcement about it here as well as on Urpi’s Dream.
All of that chatter has little to do with the point of this post. The point of this post is to discuss how to dynamically center and image in a div! So let’s get to the meat of it!
A part of the Urpi Gallery, mentioned above, is a rotating image widget that can either be used on the sidebar, or in posts. Here’s an example of it, with some purdy pictures of flowers I found on Flickr under the Creative Commons license :
As you can see above, the dynamically chosen image is very nicely centered in that gray div. I thought that centering an image in a div, as above, would be a piece of cake, but it turned out not to be so clear cut.
Centering an image in a table cell, both horizontally and vertically is trivial:
 |
<style>
.centeredImageTD {
width: 180px;
height: 180px;
vertical-align:middle;
text-align:center
}
</style>
<td class=”centeredImageTD”>
<img src=”Benny.jpg” width=”120″ alt=”Benny” />
</td> |
Isn’t that easy? All done with some css on the table cell (td) that explicitly states: center the content of this table cell, both horizontally and vertically. The dimensions of the image don’t matter with this method of centering.
As the web has evolved, the appropriateness of tables in web design has decreased, and the task now is to put our designs together using divs. The use of divs improves many web design tasks, but it makes this one task, of centering images more difficult. While the tag can be used in a pinch to center an image horizontally, there is no equivalent tag or style rule to center an image vertically. The only option is to use the margins of the image, or the padding on the div. Both require that you know the width and height of the image, and div.
As I was determined to have my images centered in a div, I got down to writing my php functions to make it happen, every time. The function below requires that you pass the actual dimension of the image, which can be captured with tools like identify from ImageMagick, or with the built in php functions imagesx and imagesy. Also required by the function is the desired width of the border given to the image ($border_width), and the width of the div you want to center your image in as $divsize. This function assumes your div is square, but it is possible to adapt this function to accommodate rectangular divs.
/*
getCenteredMargins - determines the margins for an the image to be centered in a div
1. $imagefile – Path to the image
2. $divsize – The width and height of the square div containing the image in pixels
3. $border_width – The width of the desired boreder around the image in pixels
4. $max_size – The maximum width and height of the image as it is to appear on the page
*/
function getCenteredMargins($image_width, $image_height, $divsize, $border_width, $max_size){
// Initializations
$width = 0; $height = 0;
$margin_top_bottom = “”; $margin_left_right = “”;
if($image_width > $image_height){
// Most likely a pic landscape orientation, width of the image will
// equal the max_size
$width = $max_size;
// Determine scaled down height of the image with the the ratio
// of the original image
$height = (int)($max_size * $image_height / $image_width);
// right and left margins will be small, and equal to the
// specified border width
$margin_left_right = $border_width . “px”;
// top and bottom margins will be larger
$margin_top_bottom = (int)(($divsize – $height) / 2) . “px”;
}else{
// Most likely a pic portrait orientation, height of the image will
// equal the max_size
$height = $max_size;
// Determine scaled down width of the image with the the ratio
// of the original image
$width = (int)($max_size * $image_width / $image_height);
// top and bottom margins will be small, and equal to the
// specified border width
$margin_top_bottom = $border_width . “px”;
// right and left margins will be larger
$margin_left_right = (int)(($divsize – $width) / 2) . “px”;
}
return array($margin_top_bottom, $margin_left_right,$width, $height);
}
list($margin_top_bottom , $margin_left_right, $width, $height) = getCenteredMargins($image_width, $image_height, $divsize, $border_width, $max_size);
$image_style = “margin: $margin_top_bottom $margin_left_right;”;
$html = “<div><img style=”$image_style” src=”$src” width=”$width” height=”$height” /></div>”;
Discussion