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

Updating website content dynamically using Javascript and JSON-encoded data

The background of an HTML button does not appear in IE8

Using JQuery to Load Text Content from Textarea into an IFrame

Creating a Fixed Footer with CSS

Sending Django Variable With Javascript

Employing JavaScript for fading divs in and out sequentially

Refreshing Django HTML table dynamically upon database updates

Steps to import shared CSS using Styled-components

Using PHP to output HTML tags as text

Displaying the division of shares in an HTML table using jQuery to add a new row

CSS - Layering <divs> on top of clear <div>'s

Choosing a box will cause a dashed rectangle to appear when the mouse is selected

Click to Rotate the Shape

How to ensure onmouseenter and onmouseleave work properly in Chrome using HTML, JavaScript, and jQuery

Extract the directory name from a URL using PHP, excluding any file names or extensions

What is the best way to retrieve the href and id values dynamically from a card in React JS?

What's the key ingredient I need to add for a dropdown navigation menu?

Is there a way to prevent automatically scrolling to the top of the page when submitting a form?

I am looking to arrange two div elements and one navigation bar into the header, positioning them at the top-left, top-center, and top-right using CSS. How

Triggering a specific outcome with every user interaction involving the selection of an element