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 kathleen de Villiers
kathleen de Villiers
4,912 Points

3 SVG images in a row - centered

I am stuck on a point, I would like to have 3 images, all the same size, in a row (inline-block) centered. I can't seem to find the solution, As soon as I use inline-block it does not allow me to adjust the size of the icons. I would like to size them using % so that they adapt with the screen size. Here is my HTML:

<section>

<div id="content">

<img src="img/Computericon.svg" alt="" />

<img src="img/paintbrush.svg" alt="" />

<img src="img/Computericon.svg" alt="" />

</div>

</section>

Please could someone tell me what to use on my style sheet. Nothing I am doing is right. To put it into more perspective, these three images will be 3 options as the viewer opens the page.

Thank you!

3 Answers

Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points
Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points

I made this codepen - link - is it something like that you trying to do?

kathleen de Villiers
kathleen de Villiers
4,912 Points
kathleen de Villiers
kathleen de Villiers
4,912 Points

Yes thank you!

Idan Melamed
Idan Melamed
16,285 Points
Idan Melamed
Idan Melamed
16,285 Points

If you don't want to use flexbox, you can try this: http://codepen.io/idanmel/pen/PNvJOB