OK, I have a page (code below) that I would like to have work by having the images displayed in rows. However, there may be not be enough images to complete the row - go all the way across the displayed area. I would like (1) all the rows to be more centered horizontally in the display and (2) all the “excess” images (not able to fill the row) be centered horizontally.
Tried some things I found on the web, but nothing seems to work.
Please tell me where I went wrong.
Oh, this is not live yet - still on development machine
F
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Picture Page</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
img {
margin: 0 auto;
}
a {
text-decoration: none;
border: none;
}
div#albumJPG {
display: block;
margin: 5px auto;
width:220 px;
font-size:80%;
font-color: magenta;
text-align:center;
float:left;
}
#header {
/* background-color: #FF3; */
color:#000;
margin: -5px 0px 0px -10px;
/* height: 150px; */
font-size: 1.1em;
padding: 10px 10px;
border: solid 1px green;
text-align: center;
vertical-align:middle;
background-color:#0C3;
}
#mainContent {
padding-left: 10px;
padding-top: 2px;
/* background-color: #567; */
/* border: solid 1px green; */
margin: 0 175px;
position: relative;
}
.clear {
clear: both;
}
.Mission p {margin-bottom: 10px; }
h2, h3 {text-align:center; padding-top: 5px;}
</style>
</head>
<body id="PagePictures" >
<div id="Wrapper" class="Container">
<div id="leftcol">
<?php include_once('inc/MainNav.php'); ?>
</div>
<!-- end left column -->
<div id="center-col">
<div id="header">
<h1 class="Welcome">Pictures </h1>
<div class="Mission">
<p>Below are some of the albums we have for you to view</p>
<p></p>
<p style="font-size:.8em;">Click on an image view each ablum<br><br> We hope you enjoy these historical views!!</p>
</div>
</div>
<-- start of image(s) display -->
<div style="text-align: center;">
<div id="albumJPG">
<a href="Pictures/display.php?album=1">
<img src="images/2010Flyer.jpg" width="220" > 2010 Show Pictures
</a>
</div>
<div id="albumJPG">
<a href="Pictures/display.php?album=1">
<img src="images/2010Flyer.jpg" width="220" > 2010 Show Pictures
</a>
</div>
<div id="albumJPG">
<a href="#">
<img src="images/flyer09.jpg" width="220"> 2009 Show Pictures
</a>
</div>
<div id="albumJPG">
<a href="#">
<img src="images/flyer08.jpg" width="220"> 2008 Show Pictures
</a>
</div>
<div id="albumJPG">
<a href="#">
<img src="images/flyer07.jpg" width="220"> 2007 Show Pictures
</a>
</div>
<div>
<-- end of images display , I hope! -->
<!-- oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo -->
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
</div>
<!-- end center column -->
</div>
<!-- Container / Wrapper -->
</body>
</html>