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
CSS
Can someone point me in the right direction? My brain is dead from coding layout + image database stuff today
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:
<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:
.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