Search code examples
htmlcssflexboxpositionweb-deployment

How do I make my image stay centered where my div background colors split?

html

<body>

    <header>

        <div class="indexHeaderWall" id="headerLeftWall">
        </div>

        <img id="profilePic" src="icons/myPicture.jpg" alt="Picture of Daniel Campos">

        <div class="indexHeaderWall" id="headerRightWall">
        </div>

    </header>

</body>

css

body {
    background-color: aqua;
    margin: 0%;
}

header {
    background-color: orange;
    display: flex;
    position: relative;
}

#profilePic {
    position: absolute;
    left: 26%;
    top: 0%;
    bottom: 0%;
    margin: auto 0%;
}

.indexHeaderWall {
    background-color: aliceblue;
    height: 300px;
    border: solid red 1px;

}
#headerLeftWall {width: 30%;}
#headerRightWall {width: 70%;}

I tried using percentages with position but I cant seem to keep my image horizontally centered on the split as I reduce my window size.

Left div takes up 30% of the width, while the right div takes the rest.

I'm assuming ill have to manually adjust position percentages to try and center a given image on the split, does anyone know of a method that would work on any given image? Or how I might adjust my current code to do so?

Thank you for your time!

Solution

  • This keeps it in the centre.

    <body>

<header>

    <div class="indexHeaderWall" id="headerLeftWall">
    </div>
    
          <img id="profilePic" src="icons/myPicture.jpg" alt="Picture of Daniel Campos">

    <div class="indexHeaderWall" id="headerRightWall">
    </div>

</header>

    body {
    background-color: aqua;
    margin: 0%;
}

header {
    background-color: orange;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}


#profilePic {
  width: fit-content;
  border: 2px solid yellow;
  position: absolute;
  left: 30%;
  right: 70%;
  transform: translateX( -50% );
  display: flex;
  align-self: center;
}

.indexHeaderWall {
    background-color: aliceblue;
    height: 300px;
    border: solid red 1px;
}
#headerLeftWall {width: 30%;}
#headerRightWall {width: 70%;}

    Example Pen