View Full Version : How to move text up in relation to the pictures

02-11-2012, 01:30 PM
I have this simple website: http://www.belerosemedia.com/contact.php

I have two separate classes assigned to icons (same class for all icons) and text on the right (same class for four lines of text)

<img src="img/mail.jpg" class="contact"/><span class="contacttxt">b@.com</span><br />
<img src="img/icq.jpg" class="contact"/><span class="contacttxt">63</span><br />
<img src="img/facebook.jpg" class="contact"/><a href="http://" target="_blank"><span class="contacttxt">www.fac</span></a><br />
<img src="img/twitter.jpg" class="contact"/><a href="http://" target="_blank"><span class="contacttxt">www.</span></a>

.contact {
padding: 10px 8px 0px 16px;

.contacttxt {
padding-left: 10px;

For some reason I am not able to move the text up with something like padding-top -10px; or margin-top -10px; I am not sure if I should go as far as position relative etc.

Thank you

02-11-2012, 01:34 PM
I removed the <br />'s as I was thinking they were taking / blocking some kind of space and just wrapped all four lines in <p></p> tags, but that did not make no difference. padding-bottom, margin-bottom still dont work...

02-11-2012, 01:45 PM
This is one of the few occasions where vertical-align:middle will do what you need. Try applying that to .contact, and then adjusting your padding.

02-11-2012, 02:14 PM
It looks a little better, but padding-top on .contact (pictures) changes only the distance bettween the icons and it is kind of hard to find the right number of pixels for that. vertical-align fixed it, but I am still trying to lower the text (.contacttxt class, all the same for all 4 lines) down a little bit. padding, marking - positive and negative does not affect that class...

02-11-2012, 02:19 PM
It won't affect the span element because it's an inline element.

Try changing the top and bottom padding on .contact.

02-11-2012, 02:24 PM
It looks good now. Thanks a lot! I would be probably stuck on this one for a while...