Having trouble styling and image inside a box

I am working on the tribute page (setting it up as a dating profile) and im having trouble getting the image to do what i want inside the box. My plan was to use that section like an astrology card. I feel like im missing something cruical or overlooking something simple. Can anyone spare a second to tell me what i am doing wrong?

not sure what do you want to do with the image, can you explain?

sure. my plan was to add a border to the image and give it a radius to make it more circular and look like an image you would find on a card, kind of like looking into a mirror then add some text to the box. once i do that im having trouble centering the image in the box, when i add margins to it, i think the margin is basing itself off the page as a whole and not within the box. i could be overthinking things and this is my first attempt at coding a page

No, is basing on the div, the problem here is the amounts aren’t coherent. You have setted more margin than the available space, so is only using the left margin.

You’ve already have the solution on the box, is the “auto” margin, just like you used before.

There are several ways to center an element inside another one. With margins. margin: 100px auto this will add 100px margin on top and bottom, and make the element horizontally centered. margin: auto will center vertically and horizontally but not always works, that depends on the other elements, but there is a better solution for center horizontally and vertically at same time, and it’s with positioning:

.box {
    position: relative;
}
image {
    position: absolute
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Don’t forget to use relative position on parent, if you forget this your image will be centered on the document.

A few recommended readings about this:

Thank you so much! That makes so much sense now. I needed someone to point me in the right direction and i appreciate your time!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.