Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,275 Points
Jesus Mendoza
Jesus Mendoza
23,275 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,275 Points
Jesus Mendoza
Jesus Mendoza
23,275 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.