Hi Guys I have this....

 

<div id="footercontact"><br />

<div class="footcontact"><img src="images/t.gif" />01722 326 055</div><br />

<div class="footcontact"><img src="images/f.gif" />01722 414 076</div><br />

<div class="footcontact"><img src="images/e.gif" /><a href="mailto:office@stagecraft.co.uk">office@stagecraft.co.uk</a></div>

</ul>

</div>

 

with this css...

 

#footercontact

{

text-align:left;

float:right;

width:240px;

height:130px;

border-left:1px solid #00314A;

padding-left:28px;

vertical-align:middle;

line-height:20px;

}

 

.footcontact

{

text-align:center;

font-family:"AmerType Md BT", Georgia, serif;

font-size:16px;

margin-bottom:5px;

vertical-align:middle;

display:inline-block;

}

 

.footcontact a

{

color:#003;

text-decoration:none;

}

.footcontact a:hover

{

text-decoration:underline;

}

 

but I can't work out why the text won't center vertically inline with the image so that it looks nice...

 

any ideas would be a great help....

 

thanks in advance...

 

Stu

Float the images left, the text will then be vertically aligned

Float the images left, the text will then be vertically aligned

Hi, thanks for the reply, I added a class to the images of ...

 

.floatright

{

float:right;

}

The text is now at the top of the images I still can't get them exactly in the middle of the images...any ideas???

 

Thanks in advance....

If you only have one line of text beside each image, a possible solution would be to specify a line-height for the text the same height as the image.

So, if your images are 100px high, specify a line-height of 100px for the text. That will only work if it is only one line though.

If you only have one line of text beside each image, a possible solution would be to specify a line-height for the text the same height as the image.

So, if your images are 100px high, specify a line-height of 100px for the text. That will only work if it is only one line though.

Sorted it...thanks very much!!