CSS alignment issue

melon · #1 Aug 12th, 2007, 19:37

Hey all, am making a picture gallery, and have laid it out in 4 columns for images, given each image a container using list items etc.

Anyways its fixed size, and the image will either be max height or width as 150px so at least one dimension of the thumbnail will fit the container.

Basically at the mo I have all images in top left of the container, so all landscape images have space underneath, and all portrait images have space to the right. I need them to be middle / center.

HTML

Code: Select all

<ul class="gallery">
<li><a href="index.php?view=view_image&img=25"><img src="thumbimage.php?img=25" width="150" height="120" border="0"></a></li>
</li>

CSS

Code: Select all

.gallery{
    margin:0; padding:0;
    overflow:hidden;
    width:100%;
    list-style:none;
}
.gallery li{
    float:left;
    display:inline;
    width:23.8%;
    margin:0 0 10px 1%;
    padding:10px 0;
    height:158px;
    position:relative;
}
.gallery a,
.gallery img{
    display:block;
}

a img{ border:none; }

.gallery a:link,
.gallery a:visited,
.gallery a:focus,
.gallery a:hover,
.gallery a:active{
    padding:3px;
    background:#eeefef;
    width:150px; height:150px;
    border:1px solid #c2c3c3;
    margin: auto auto auto auto;
}
.gallery a:hover{
    border-color:#ff0000;
}

.gallery{
    border-bottom:2px solid #000;
    padding-bottom:10px;
    margin-top:10px;
}

Can someone point me in the right direction? My brain is dead from coding layout + image database stuff today :P

melon · #2 Aug 12th, 2007, 21:53

Live link here as an example - http://mort.86degrees.com/sites/gall...?view=gallery2

Have fixed the portrait images so they horizontally align, but the landscape ones are all still at the top of their containers

Any ideas?

Lchad · #3 Aug 12th, 2007, 23:17

Well here's sort of a shot in the dark.

I found this code on one of the enlarged graphics pages. I added the part in red and it centered the entire table. Does that solve the problem?

Code: Select all

<table align="center">
    <tr>
    <td valign="center" align="center">
    
    <img src="image.php?img=23" width="650"><p><a href="view_fimage.php?img=23" target="_blank">Full Size Image</a>
    </td>
    </tr>
  </table>

melon · #4 Aug 13th, 2007, 00:15

hehe

was going for a table-less layout, been trying to resist using that, wanted to do it all in css if I could

Lchad · #5 Aug 13th, 2007, 01:43

Oh sorry... missed that part of the post apparently!

Well I'll try to see if I can figure out something tomorrow!

Centering along the horizontal is easy... that's simply margin: 0 auto;

Centering along the vertical is more difficult. I don't know that off the top of my head. I'd have to google it. I know there have been posts on this forum with complete explanations too.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] CSS Alignment Issue	AaronSmith	Web Page Design	5	Jan 23rd, 2008 14:21
Alignment Issue	keydin	Web Page Design	2	Aug 24th, 2007 01:37
Alignment issue in table with multiple select	peacher	Web Page Design	2	Aug 23rd, 2007 07:35
Alignment in IE	technicolourchameleon	Web Page Design	4	Oct 11th, 2006 22:59
Alignment issue with header	WillisTi	Web Page Design	1	Jan 31st, 2006 16:20

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS alignment issue