View Full Version : Replacing tables with CSS, centering image vertically

02-28-2009, 10:28 AM
First post here so be gentle with me....

I'm trying to update a page to remove the table used to layout a list of photos and accompanying descriptions.

I've done this by using a list:


Relevant css is here:


margin: 10px 0;
padding: 0;
list-style: none;
float: left;
width: 100%;

ul.column li {
float: left;
width: 100%;
padding: 10px 0;
margin: 0;
border-bottom: 2px solid #A7A669;


ul.column li .imgblock {

font-weight: bold;
float: left;
width: 252px;
padding: 0px;
text-align: center;
margin: auto 0px;

ul.column li .detail{

padding-left: 300px;

Fine so far, but I would like to get the image to center vertically against the text - as it does in the existing table based page here:http://www.adelaidewalker.co.uk/sheepbreeds.html.

If this is possible any hints would be greatly appreciated. Alternatively, in this case is the use of a table justified - any views.

Thanks in advance.

02-28-2009, 11:31 AM
Hello SB65,
A table really isn't appropriate there, and neither is your ul since it's not really a list.
You also have a lot of absolute positioning. Have a look at this page - http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/
Much better to use floats and margins to position your elements.

Your #header, #menu, #MainText and probably others are set heights but not high enough for their content. Try this and you'll see what I mean:
#Header {
left: 221px;
top: 26px;
background: #fff;

#Menu {
left: 22px;
top: 250px;
background: #f00;

#Logo {
left: 24px;
top: 23px;

#MainText {
left: 270px;
top: 156px;
background: #00f;
Leave those colors and remove the height:xx; line and see what happens.

02-28-2009, 11:51 AM
Have a start with your positioning with this -

02-28-2009, 04:56 PM
Hi Excavator

Thanks for your suggestions on positioning using margins rather than absolutes, I will work through these. I'm slowly working through this site trying to tidy it up.

I maybe being dense, but I still can't see a way of centring the image against the text. On the example page and the revised code suggested, the top of the image is aligned with the top of the text, but in some cases I have much smaller image and much longer text, and don't want to have the two things aligned at the top.

I've amended the page to better illustrate the question (and removed all the absolute positioning):http://www.adelaidewalker.co.uk/test/tabletest.htm.

For the top entry the image is small in height compared to the text, and I'd like to centre the image against the text. There will be multiple entries on this page with varying image and text heights. Sorry if I didn't explain better before.

02-28-2009, 06:50 PM
Good morning SB65,
That was a hurried example I gave you, it was 2am here and I was off to bed.
To move the image in my above code you would need to adjust the margin. I didn't know you were going to have multiple and varied entries like this. That calls for another method.

To start with, #PageText isn't really doing anything rightnow. Let's make that a class so we can re-use it. That way it can contain the text and your image can have the same container to center in. I have a demo that should show the centering method here - http://nopeople.com/CSS/vertical%20center%20with%20CSS/ -
I think the method used on the second page will work. I've never tried it in a fluid height container though... I'll have to mess with this a bit.

02-28-2009, 07:26 PM
Ok, this is valid and seems to work in FF3 and IE7. I've added a meta tag in the head that forces IE8 to emulate IE7 because this doesn't work in IE8.
Not a clue what it's going to do in IE6.

When we made .pageText a class so it could contain each image and coresponding text together it needed to be position:relative; for the vertically centered image to work.

Remove the .left on the image because it's absolutely positioned now with #ewe.

You could use a class here too, as long as each image was the same size.

I hope this makes sense.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="adelaideWalker.css" rel="stylesheet" type="text/css" />
<div id="wrap">
<div id="logo">
<img src="http://www.adelaidewalker.co.uk/Images/Header/AWlogo_cream.jpg" alt="Adelaide Walker logo" title="Adelaide Walker logo" width="180" height="212" />
<div id="header">
<img src="http://www.adelaidewalker.co.uk/Images/Header/AdelaideWalker_cream.jpg" alt="Adelaide Walker" title="Adelaide Walker" width="567" height="56" />
<p>Textile Craft Specialist</p>
<div id="menu">
<p><a href="../Index.html" class="navlink">Home</a></p>
<p><a href="../UndyedTops.html" class="navlink">Undyed Wool Tops</a></p>
<p><a href="../DyedTops.html" class="navlink">Dyed Wool Tops</a></p>
<p><a href="../PlantFibres.html" class="navlink">Silk &amp; Vegetable Fibres </a> </p>
<p><a href="../SpecialityFibres.html" class="navlink">Luxury Fibres</a> </p>
<p><a href="../Ordering.html" class="navlink">Ordering</a></p>
<p><a href="../Gallery.htm" class="navlink">Gallery</a></p>
<p><a href="../SheepBreeds.html" class="navlink">Sheep Breeds</a></p>
<p><a href="../Contact.html" class="navlink">Contact Us </a></p>
<div id="mainText">
<div class="pageText">
<img src="http://www.adelaidewalker.co.uk/Images/SheepBreeds/Breeds_Herdwick.jpg" alt="Black Welsh Mountain ewe and two lambs" title="Black Welsh Mountain ewe and two lambs" id="ewe" width="252" height="184" />
<div class="detail">
<p>(Fibres available <a href="UndyedTops.html#Herdwick">here</a>)</p>
The name Herdwick comes from a Norse word meaning sheep pasture. The origin of the breed itself is unknown,
but the most common theory is that the ancestors of Herdwick sheep were introduced by early Norse settlers.
Herdwick are very hardy sheep which can survive on the high fells. Flocks today are still concentrated in
the Lake District.
Image provided by Dorothy Wilkinson, <a href="http://www.herdwick-sheep.com/" target="_blank">Herdwick
Sheep Breeders' Association</a>. The sheep have traditional red backs, now used for making the sheep
more attractive when they are shown but historically believed to help the farmers determine where
their tups (rams) were when they were on the fells. Iron ore dust was originally used but it can now
be purchased as Herdwick red in tubs.
<!--end detail--></div>
<!--end pageText--></div>
<div class="pageText">
<img src="http://www.adelaidewalker.co.uk/Images/SheepBreeds/Breeds_BlackWelshMountain.jpg" alt="Black Welsh Mountain ewe and two lambs" title="Black Welsh Mountain ewe and two lambs" class="left" width="252" height="184" />
<div class="detail">
<h2>Black Welsh Mountain</h2>
<p>(Fibres available <a href="UndyedTops.html#BlackWelshMountain">here</a>)</p>
This coloured sheep is an ancient breed and was described in Welsh writings from the middle ages. They are relatively
small black sheep with dense fleeces and no wool on their face or legs below their knees. The males have horns.
Flocks are concentrated in Wales with smaller flocks throughout the UK.
Image provided by kind permission of the <a href="http://www.blackwelshmountain.org.uk/">Black Welsh Mountain
Sheep Breeders' Association</a>.
<!--end detail--></div>
<!--end pageText--></div>
<!--end mainText--></div>
<div id="footer">
<p>Adelaide Walker &copy; 2009 </p><span>Some more text</span>
<!--end footer--></div>
<!--end wrap--></div>

/* Set defaults */
* {
margin: 0;
padding: 0;
border: none;
body,td,th {
color: #000000;
font: small Arial, Helvetica, sans-serif;
/*background-color: #f7f59c;*/
/*Common styling */
a, a:link, a:visited {color: #000000;}
width: 100%;
height: 2px;
margin: 0 0 20px 0;
background: #A7A669;
color: #A7A669;
h1 {font-size: large;font-weight: bold;}
img.left {float:left;margin:0px 15px 15px 0px}
img.right {float:right;margin:15px 15px 15px 30px}
img.rightnotopmargin {float:right;margin:0px 15px 15px 0px}
.clearboth {clear:both}
/* Layout Divs */
#wrap {
width: 1000px;
background: #F6F59B;
overflow: auto;
#header {
margin: 26px 0px 0px 17px;
#menu {
margin: 15px 0px 0px 22px;
float: left;
#logo {
margin: 23px 0px 0px 24px;
#mainText {
margin: 156px 0 0 270px;
overflow: auto;
/* Entries */
.pageText {
position: relative;
.detail {margin:0px 0px 0px 285px}
#ewe {
top: 50%;
left: 10px;
width: 252px;
height: 184px;
margin: -100px 0 0 0; /*this negative top margin should be half the images height*/
border: 3px double #000;

/* Menu styling */
#menu a.navlink {
text-decoration: none;
text-align: center;
margin:5px 5px 5px 0px;
border: 1px solid #A7A669;
background: url(http://www.adelaidewalker.co.uk/Images/Header/MenuButton.jpg);
#menu a.navlink:hover {
color: #f00;

/*Header styling - for the text under the AW text image */
#header p {
padding-left: 280px;
font: italic bold 24px "Times New Roman", Times, serif;

/*Styling to put the brown border on */
.border{border: 4px solid #A7A669}
.border p {margin:10px}
p.border {padding:10px}

/* Footer - allow two items of text left and right */
#footer p {margin-top:15px;padding-bottom:15px;float:left}
#footer span {margin-top:15px;padding-bottom:15px;float:right;text-align:right;width:400px}

02-28-2009, 08:16 PM
Hi Excavator

Thanks very much for all this. Need to go and do something else now so I will have another look in the morning and try and get my head round it. Unfortunately not all the images are the same height, so I guess I'm going to end up with a few ids to sort it all out.