Alignment of page elements

Hi guys

Now after some hacking I have finally got all the elements displayed that I need. My issue is alignment of these elements. I've tried all the tags I know, but the non-square thumbnails will not align to center, and I cannot place the image/album titles directly under the images (there is a large gap)

See the album page:
http://www.doceave.com/panoramicafrica/index.php?q=gallery

So all I need to do is:
1) Center the thumbnails
2) Place titles of albums/images directly under their respective images/albums

Here is my album.tpl for the siriux theme:

<code>

{*
* $Revision: 16235 $
* Read this before changing templates! http://codex.gallery2.org/Gallery2:Editing_Templates
*}
<center>

<h1 align="center"><center>{$theme.item.title|markup}</center></h1>
<p> </p>
<p> </p>

{if !count($theme.children)}
<div class="gallery-empty">
<p><strong>{g->text text="This album is empty."}</strong></p>
{if isset($theme.permissions.core_addDataItem)}
<p><a href="{g->url arg1="view=core.ItemAdmin" arg2="subView=core.ItemAdd"
arg3="itemId=`$theme.item.id`"}">{g->text text="Add a photo!"}</a></p>
{/if}
</div>
{else}
{assign var="firstAlbum" value=true}

{assign var="currentYear" value=""}
{foreach from=$theme.children item=child}

{if $child.canContainChildren}
{if $firstAlbum}
<div class="gallery-albums" align="center">
{assign var="firstAlbum" value=false}
{/if}

{* Year separator *}
{if $theme.params.groupByYear}
{capture name=year}{g->date format="%Y" timestamp=$child.originationTimestamp}{/capture}
{if $smarty.capture.year != $currentYear}
<h3 style="clear: both;">{$smarty.capture.year}</h3>
{assign var="currentYear" value=$smarty.capture.year}
{/if}
{/if}

<CENTER>

<div class="gallery-album" align="center">
<div class="gallery-thumb" align="center">
<center><a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}" align="center">
{if isset($child.thumbnail)}
{g->image item=$child image=$child.thumbnail}
{else}
{g->text text="no thumbnail"}
{/if}
</a></center>
</div>

</center>

<h4><a href="{g->url arg1="view=core.ShowItem"
arg2="itemId=`$child.id`"}"><center>{$child.title|default:$child.pathComponent|markup}</center></a></h4>

<p>{if isset($child.summary)}{$child.summary|entitytruncate:256|markup}{/if}</p>
</div>
{/if}
{/foreach}
{if !$firstAlbum}
<div class="clear"></div>
</div>
{/if}

{assign var="firstItem" value=true}

{foreach from=$theme.children item=child}
{if !$child.canContainChildren}
{if $firstItem}
<div class="gallery-items" align="center">
{assign var="firstItem" value=false}
{/if}
<div class="gallery-thumb" align="center">
<center><a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}" align="center"><center>
{if isset($child.thumbnail)}
{g->image item=$child image=$child.thumbnail}
{else}
{g->text text="no thumbnail"}
{/if}
</center></a></center>
</div>

<p class="giTitle">
{if $child.canContainChildren && (!isset($theme.params.albumFrame)
|| $theme.params.albumFrame == $theme.params.itemFrame)}
{* Add prefix for albums unless imageframe will differentiate *}
{g->text text="Album: %s" arg1=$child.title|markup}
{else}
{$child.title|markup}
{/if}
</p>

{/if}

{/foreach}
{if !$firstItem}
<div class="clear"></div>
</div>
{/if}
{/if}

{* Navigator *}
{if $theme.totalPages > 1}
{g->block type="core.Navigator" navigator=$theme.navigator prefix="&laquo; " suffix=" &raquo;"
currentPage=$theme.currentPage totalPages=$theme.totalPages}
{/if}

{* Description *}
{if !empty($theme.item.description)}
<hr />
<p>{$theme.item.description|markup}</p>
{/if}

{* Show any other album blocks (comments, etc) *}
{foreach from=$theme.params.albumBlocks item=block}
{g->block type=$block.0 params=$block.1}
{/foreach}

</center>

</center>

</code>

As you can see I'm aiming for a super simple theme for embedding into Drupal 6. (Will be displaying panoramic photos and virtual tour in swf format)

I realize the problem may not be in the code but in page-width / thumbnail size settings... I'm still lost though and will greatly appreciate any help. G2 is by far the best prog out there and I want to use it!

Thanks

This should be able to be fixed with css. I would not hard code <center></center> in the html or the <div>s
anyway change the css to:

.gallery-album {
height:175px;
}

Adjust the height as you need
and

.gallery-thumb {
height:230px;
width:100%;
}

adjust the width as needed.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

Floridave ~ I'm using the Siriux theme whihc has a theme.css which does not have any code as you describe. Could you reiterate your instructions as for the Siriux theme.css? Thanks...

@Floridave.... A super minimal theme if anyone needs one... (will be happy to share): http://www.doceave.com/panoramicafrica/index.php?q=gallery

No credit to me... this is Simplified-simplified!

I'll read the originals terms of use and perhaps ask the author if we can re-package it...

Thanks for your help though.