What's the best way to ensure that my image remains perfectly centered at the point where the background colors of my

Question

What's the best way to ensure that my image remains perfectly centered at the point where the background colors of my

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: 25%;
    top: 0%;
    bottom: 0%;
    margin: auto 0%;
}

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

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

I experimented with using percentages for image centering, but encountered difficulties as the window size decreases.

The left div occupies 30% of the width, leaving the remaining space for the right div.

If you have any suggestions on how to effectively center an image on a split like this regardless of its size, please share your insights or modifications to the code provided!

Thank you for your assistance!

html css flexbox position web-deployment

Answer 1

Answer №1

This positions it at the center.

<body>

<header>

    <div class="indexHeaderWall" id="headerLeftWall">
    </div>
    
          <img id="profilePic" src="icons/myPicture.jpg" alt="Photo 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%;}

Sample Pen Link

Answer 2

This positions it at the center.

<body>

<header>

    <div class="indexHeaderWall" id="headerLeftWall">
    </div>
    
          <img id="profilePic" src="icons/myPicture.jpg" alt="Photo 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%;}

Sample Pen Link

Answer 3

Answer №2

Here's an example you can experiment with:

HTML

<div id= "wrapper">
  <div id= "profileImage">
    <img />
  </div>
  <div id="leftColor">
  </div>
  <div id="rightColor">
  </div>
</div>

CSS

#wrapper {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100%;
}

#profileImage {
 width: 300px;
 background: yellow;
 position: absolute;
}

#leftColor {
 background: green;
 width: 500px;
 height: 500px;
 max-width: 50%;
}

#rightColor {
 height: 500px;
 background: blue;
 max-width: 50%;
 width: 500px;
}

Check out the Pen here!

Answer 4

Here's an example you can experiment with:

HTML

<div id= "wrapper">
  <div id= "profileImage">
    <img />
  </div>
  <div id="leftColor">
  </div>
  <div id="rightColor">
  </div>
</div>

CSS

#wrapper {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100%;
}

#profileImage {
 width: 300px;
 background: yellow;
 position: absolute;
}

#leftColor {
 background: green;
 width: 500px;
 height: 500px;
 max-width: 50%;
}

#rightColor {
 height: 500px;
 background: blue;
 max-width: 50%;
 width: 500px;
}

Check out the Pen here!

Answer 5

Answer №3

Perhaps you're wondering why someone would choose to approach it in this manner, but if you're curious, one possible solution involves utilizing both calc() and custom properties. By retrieving the image width with JavaScript and passing that value into the calculation, you can achieve your desired effect.

:root {
  --left-wall: 30%;
}

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

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

#profilePic {
    position: absolute;
    left: calc(var(--left-wall) - var(--image-width)/2);
    top: 0%;
    bottom: 0%;
    margin: auto 0%;
    opacity: 0.5;
}

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

}
#headerLeftWall {width: var(--left-wall)}
#headerRightWall {width: 70%;}

const img = document.querySelector("img");
img.style.setProperty('--image-width', `${img.width}px`);

Take a look at this functioning example on CodePen

Answer 6

Perhaps you're wondering why someone would choose to approach it in this manner, but if you're curious, one possible solution involves utilizing both calc() and custom properties. By retrieving the image width with JavaScript and passing that value into the calculation, you can achieve your desired effect.

:root {
  --left-wall: 30%;
}

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

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

#profilePic {
    position: absolute;
    left: calc(var(--left-wall) - var(--image-width)/2);
    top: 0%;
    bottom: 0%;
    margin: auto 0%;
    opacity: 0.5;
}

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

}
#headerLeftWall {width: var(--left-wall)}
#headerRightWall {width: 70%;}

const img = document.querySelector("img");
img.style.setProperty('--image-width', `${img.width}px`);

Take a look at this functioning example on CodePen

What's the best way to ensure that my image remains perfectly centered at the point where the background colors of my

Answer №1

Answer №2

Answer №3

Similar questions

Tips for aligning an element in the center in relation to its sibling above

Unable to display a Google map within a webview when viewing a local HTML file

Place the menu on top of the div by adjusting the z-index

Tips for evenly distributing list elements in HTML without using whitespace

Is there a way to detect when a CSS background image has finished loading? Does an event trigger upon completion?

Hide bootstrap card on smaller screens such as sm and md

What is the best way to run a function after 10 seconds of inactivity using jquery?

What is the best way to position a Button on the far right of an MUI AppBar?

The <link> element in the HTML file referring to the stylesheet {% static 'css/style.css' %} is not functioning properly

How to Exclude Specific Div from CSS Stylesheet Styling

What is the best way to incorporate this video into this particular frame?

What is preventing the JQuery dialog from opening?

What is the best way to ensure that the input search bar, microphone icon, and two small boxes adapt to different screen

The text color is being influenced by the transparent background behind it

What is the best way to enlarge a specific section of a map or image using HTML?

"Positioning an image at the center with Bootstrap

Arranging DIV elements into rows and columns within a table

Arranging the final item in the empty space above the div section using Flexbox

Angular - The confirmDialog from Primeng is appearing hidden behind the modal from ng-bootstrap

Ways to automatically divide lists into various div elements