Hello everyone. I have this image inside a container. The image is in the middle when the screen size is similar to a cellphone. But once we start to make bigger the screen the image goes to the left (as you can see in the evidence attached) I would like to set up the image always in the middle, no matter how size the screen has.
Thanks in advance.
This is the code:
https://codepen.io/mallquimarco/pen/JjGVBrp
This is how it looks: (the red square is where i would like the image no matter the screen size)
You need to tell your image to display like a block item instead of an inline item (meaning it takes up the whole row instead of just letting text float next to it). Then after that tag, you need to set the margin in a way that will center it. I could tell you the exact tags but seems better to give you those hints.
1 Like
The container is already in display:block I create .doctor{display:block} but It doesn´t work. But thanks, anyway.
I forked your code and applied both “display:block;” and “margin: auto;” to the specific image tag and that centers it.
I don’t think child elements inherit the block status. If you think about it, the thing you are making a block is the div itself, saying to the browser that the div will be a full line. Then inside the div, it is just the container, you also have to tell the element inside that it would need to take up the entire line, otherwise it could easily have text wrap around it inside of the div “box” you have made.