position of absolute image

[bjeffries]

I am having a bit of an issue with centering images within an image rotator. The rotator is a php/jquery rotator, its very simple. the issue I am having is getting the images to be absolute middle. I have tried what seems to be everything I know, but I am at a loss.

Here is the code to make the rotator work:

    <?
// Global Variables
$image_dir = "$_SERVER[DOCUMENT_ROOT]/port/photo/"; // directory on server
$image_relative_path = '/port/photo/'; // path to images relative to script
$file_types = array('jpg','jpeg');
$image_time = '4000'; // seconds each image will display (4000 = 4 seconds)

if($handle = opendir($image_dir)) {
    while (false !== ($file = readdir($handle))) {
    if ($file != "." && $file != "..") {
        $ext_bits = explode(".",$file); // finds file extensions
        foreach($ext_bits as $key => $value){
            if(in_array($value,$file_types)){
                $image_rotation .= '<li><div align="center"><img align="absmiddle" src="'.$image_relative_path.'/'.$file.'"></div></li>';
            }       
        }
    }
}
closedir($handle);
}

?>

<script>
$(document).ready(function() { 
    $('#image_rotate').innerfade({ 
        speed: 'slow', 
        timeout: 4000, 
        type: 'random', 
        containerheight: '500px'
    });
});
</script>
<div align="center">
<div class="rotator">
<ul id="image_rotate" style="list-style: none;">

    <?= $image_rotation; ?>

</ul>
</div>
</div>

Now here is the CSS used:

.rotator {
    width: 500px;
    height:500px;
    margin:auto 10px;
}
.rotator ul {
    margin:auto;
    padding:0;
}
rotator ul li {
    margin:auto;
    padding:0;
}
rotator ul li img {
    vertical-align:middle;
    margin:auto 0;
}
.rotator img {
    max-height:500px;
    max-width:500px;
    margin:auto;
}

You can view what I have done here: http://jeffriesproductions.com/test
Any help would be great thanks everyone!

[MarPlo]

Hi,

To center images vertically, you must add them inside a block that has a certain "height", set vertical-align: middle; , then specify that this parent block is to be formatted as a table cell (with display: table-cell;), because the contents of a table cell can be centered vertically.
Example:

    <style type="text/css"><!--
    div.container {
     height: 12em;
     border: 2px dotted blue;
     display: table-cell;           /* forms as a table cell */
     vertical-align: middle;        /* center vertically */
     text-align: center;            /* center horizontally */
     padding: 3px 4px;
    }
    --></style>

    <div class="container">
     <img src="image.jpg" alt="Text for image" width="120" height="60" />
    </div>

[bjeffries]

unfortunately that doesnt work. The way the html is rendered is as follows.

<div align="center">
<div class="rotator">
<ul class="innerfade" id="image_rotate" style="list-style: none outside none; position: relative; height: 500px;">
<li style="z-index: 20; display: none;"><div align="center"><img src="/port/photo//6.jpg" align="absmiddle"></div></li>  
</ul>
</div>
</div>

that is how the PHP and jquery render the code together. That makes everything work properly on the page but not aligned in the middle. I tried the code you gae me above but that doesnt do the trick. I may just try to add <table> code withing the php <li> tags and align them vertically and see if that solves it.