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

Lindsay Barrett
seal-mask
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points
Posted by Lindsay Barrett
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points

Content won't center with Absolute positioning

I have an image I am trying to place on the bottom of its parent element. I have the parent element set to relative and the img element to absolute.

The image is acting correctly when I move it up or down, but it will not center within it's parent element. I have set the left and right positing elements set to auto, but it is centering the element within its parent element.

Here is my code: https://w.trhou.se/o9qx43sjb8

Thank you for your help!

Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

Hi Lindsay, try using the following code:

.content4 img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -150px;
}

let me know if that works

Lindsay Barrett
seal-mask
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points
Lindsay Barrett
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points

Jesus Mendoza Thanks you, but the code did not work. It is a little closer to be centered, but it is not there.

Should I remove the container div and just make the content4 set to relative?

Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

What if you add position relative to the .container instead .content4 and add the same code I posted above?

1 Answer

Dinu Mihai
Dinu Mihai
2,761 Points
Dinu Mihai
Dinu Mihai
2,761 Points

Hi, try this in index.html <div class="content4"> <div class="container"> <h1>BOOST UP YOUR LOCAL BUSINESS</h1> <p>LORUM IMPSUM IS SIMPLY A DUMMY TEXT USED FOR THIS BUSINESS. THANK YOU FOR YOUR HELP.</p> <textarea>full name</textarea> <textarea>email address</textarea> <textarea>phone</textarea> </div> <img src="http://pngimg.com/upload/laptop_PNG5910.png" width="450" height="237" alt=""/> </div>

Get that img tag outside container and remove all css rules applied to img selector, it will be centered due to text-align: center property of content4 class.