Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Paul Murphy
Paul Murphy
6,162 Points

Aligning anchor image with text

Hi,

I have an anchored image (pdf icon) which is aligning alongside the text but slightly above it. How can I get the icon to align on the same horizontal line as the text? 

<div class="downloads">
<p><span>Chemical &amp Mechanical analysis of A/SA516</span>
<a href="pdf/a-sa-516-analysis.pdf"><img src="img/pdf-icon.png"></a></p>
</div>

2 Answers

James Andrews
James Andrews
7,245 Points

set the image as an display: inline-block and change it's margin top or bottom to move the image around. or set the anchor's position: relative, then the image set the position as absolute and use top: with positive values to move it down and negative values to move it up.

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

Here is an example: 

<div>
   <img style="width:30px;height:60px;vertical-align:middle">
   <span style="">Image Aligned</span>
</div>
Paul Murphy
Paul Murphy
6,162 Points

where is the example?