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

Donut chart with nested centered image(ex: treehouse icon on navbar)

Hey community.

The basis of this question is: what's the best way to position one element perfectly centered(both height and width) within or above/below another element. I know this one is a headache, but I want to see different views on it!

I'm working on an app that requires the use of a JS-populated donut chart surrounding a image. After tirelessly attempting to create it on my own, I found out that treehouse does something very similar to what I'm trying to accomplish on the right side of the top navbar.

They created a chart using data from your personal points scored, and centered your profile picture in the middle of it.

My question isn't about the chart or any of the JS behind it. My question is simply about how they positioned the image in the center(both vertically and horizontally) of the chart.

Are the elements each hard-coded with set pixel sizes, and positioned off of that? Is this really the best practice, or can we use percentages?

It seems that everything is hard-coded(fixed sizes, not percentages) and not responsive, which is fine with my situation. Bonus points if anyone is able to make it responsive or use bootstrap's CSS library to solve this!

I'll just use some basic divs and images, because I don't think is should be more complex than that:

    <div id="parentDiv">

            <div id="donutChart">
            </div>

            <img id="profileImg" src="avatar.JPG"/>

    </div>
#parentDiv {
    display:inline-block;
    width:66px; 
    height:66px;
    }   


#donutChart {   
    position: absolute;
    display: block;
    }   

#profileImg {
    height: 100%;
    width: 100%;
    position: relative;
    display: block;
    box-sizing: border-box;
    border: 1px solid #ccc;
    overflow: hidden;
    }

I'm kind of expecting more of a discussion on best practice than just one answer, so please don't be shy with anything you want to say! I'm learning, and so it's better to understand HOW and WHY things work than to just be given an answer. :-)

Thanks guys and gals!