Difficulty centering an image Solved thanks to an awesome community

HTML-CSS
1

/* cant seem to get the image to center on top of the two other elements. Any help would be most appreciated*/
I can achieve it by setting margin measurements at pixels the problem comes in when setting it to auto.

I want it to stay centered regardless of window size

image
image1670×303 115 KB

code at:

2

Hi @ChrisCline1138,

Are you working on this code in codepen or something? If so, please share the link. It would be easier to debug the code. Thanks!

3

no I was just experimenting with one of the exercises here
thanks

4

Hi, Chris,

So, just use codepen.io to write your code and share the link here to us.
This is an easy way to help you!

1 Like
5

Well, there are a few things going on. First, an image is an inline element (rather than a block-level one). Things like divs, or tables, or articles – these are block-level. Their usual behavior is to display as a chunk, pushing the following bits around. Things like span tags, or anchors, are usually inline. As are images.

You CAN use an image as you have, simply by adding the CSS rule:

display: block

to it.

Also, it might help to put both the image and the two divs into a container of some sort, set THAT to absolute positioning, and set the image and two contained divs to relative.

Take a look at https://repl.it/@TobiasParent/centeringAnImage to see what I mean.

6

will try that
thank you

7

must say the amount of support is awesome

8

We’ve all been there. Some of this stuff can be confusing, and it helps to have a support system. Back in my day… lol

9

I have not started the css flexbox lessons I’m thinking this gets covered there but I got curious about it so I figured I’d give it a try.

10

And using positioning, you can SIMULATE flexbox effects. But it is WAY more work. :wink:

11

that is what I am gathering.

12

thanks
created my first pen

13

…and the link to your pen? Show us the code! :smiley:

14

You can try this.

<div class="container">
  <img src="https://indiehoy.com/wp-content/uploads/2018/05/evaristo-paramos.jpg" alt="EVARISTO PARAMOS">
  <div class="one"></div>
  <div class="two"></div>
</div>


.container {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.one {
  width: 50%;
  height: 300px;
  background: repeating-linear-gradient( 45deg, yellow 0px, yellow 40px, black 40px, black 80px );
  position: absolute;
  top: 0;
  left: 0;
}

.two {
  width: 50%;
  height: 300px;
  background: repeating-linear-gradient( -45deg, yellow 0px, yellow 40px, black 40px, black 80px );
  position: absolute;
  top: 0;
  right: 0;
}
15

You could also use this code:

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 2;
  width: 30%;
  height: auto;
}

This will center the image in the middle of the screen.

16

Thank you so much
that is exactly what I was going for

17

Link to solution

2 Likes
18

thanks for your support