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 Konrad Pilch
Konrad Pilch
2,435 Points

How to put this in the middle?

HI,

How can i put this black circlle in the middle and center?

code

It needs ot be on position absolute.

dman10345
dman10345
7,109 Points

What exactly do you mean in the middle and center? Do you mean you want the image to be in the center of the page and in the middle of the entire length of it?

Konrad Pilch
Konrad Pilch
2,435 Points

In the middle of its current position. So its in the middle the red stuff. SO its like 50% between the red. So its a bit lower.

If you know what i eman.

Konrad Pilch
Konrad Pilch
2,435 Points

I managed to do it, but if u do it, id be happy to see it :)

dman10345
dman10345
7,109 Points

Yes I understand, may I ask why you need absolute position?

dman10345
dman10345
7,109 Points

Well I did it without absolute position, instead of just doing an inline element? I did it as such

.course-icon .fa-stack{
    //position: absolute;
    top:-60px;
    z-index:9999;
    display: inline-block;
    vertical-align: middle;
}
Konrad Pilch
Konrad Pilch
2,435 Points

I did it this way.

code And it works like it should : p

But yeah. I take in what you lot wrote :) thanks

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

To be centered with absolute position, it needs to be positioned at half of the reference element's width, minus half of it's own.

Since the course-icon div is 290px wide, and the fa-stack itself is 128, that's 290/2 - 128/2 or 81px.

So add: left: 81px; to the .course-icon .fa-stack rule.

If you wanted to vertically center it over course-icon (which is more than just the red part), that would be half the height of course-icon minus half it's own height, which is 76/2 - 128/2 or -26px.

In that case, also change the top setting to top: -26px in the same rule. (which lowers it a bit).

Konrad Pilch
Konrad Pilch
2,435 Points

Where did you get this? Since the course-icon div is 290px wide

The collumn is actually responsive as it uses col-sm-3, it will expand depending on the user width, so its kinda life flex-box. If i hardcode left 81px, then i would need to write media queries for each screen size and adjust it.

If you mean that?