CODEWITHSUNDEEP
htmlcss
eShad0
eShad0

Reputation: 43

Why image is not centering accurately

I'm trying to make a modal, and are stuck on the design part of it, I assume the issue is somewhere within the inherited properties that the child elements may be experiencing, right now I can move the image around but no matter what I try the centering is not perfect, when I change position left:45% it seems to be centered but I wish to make sure it looks right and or why left 50% would not make it centered.

overlay {
  /*display: none;*/
  position: fixed;
  /* Position fixed so its always in front of us*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  /* So model will stay ontop of everything*/
  background-color: rgba(0, 0, 0, 0.5);
}

#modal {
  max-width: 600px;
  height: 300px;
  margin: auto;
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.website-content {
  height: 1000vh;
}

#modal .top-container {
  background-color: rgb(56, 163, 165);
  width: 600px;
  height: 100px;
  justify-content: center;
  align-items: center;
}

.top-container img {
  margin: auto;
}

.bottom-container {
  position: relative;
  background-color: rgb(128, 237, 153);
  height: 200px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>

  <button id="show-modal-btn">Show modal</button>

  <div id="overlay">
    <div id="modal">
      <div id="modal-form">
        <div class="top-container"><img id="icon" src="note.png" width="90px"></div>
        <div class="bottom-container">
          <label for="email-input"></label>
          <input id="email-input" type="email" placeholder="Enter your email">
        </div>
      </div>
      <button id="close-modal-btn">Close Modal</button>
    </div>
  </div>

  <div class="website-content"></div>

  <script src="index.js"></script>

</body>

</html>

Upvotes: 0

Views: 47

Answers (2)

Drew Major
Drew Major

Reputation: 519

The issue you are having is because the left/right/top/bottom positions all move an element based on its left/right/top/bottom most point. so when you say "left 50%" you are really saying to put the left edge of this element 50% of the parent's width from the parent's left side.

To guarantee it's properly centered you can add a CSS3 Transform property Translate Translate shifts X and Y based on the dimensions (width when translating x, and height when translating y) of the object it's applied to so this line would shift your item's left half of its width.

transform:translatex(-50%)

you would want this on your img tag along with the left:50%

Upvotes: 2

Kameron
Kameron

Reputation: 10846

Use display: flex; on top-container

overlay {
  /*display: none;*/
  position: fixed;
  /* Position fixed so its always in front of us*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  /* So model will stay ontop of everything*/
  background-color: rgba(0, 0, 0, 0.5);
}

#modal {
  max-width: 600px;
  height: 300px;
  margin: auto;
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.website-content {
  height: 1000vh;
}

#modal .top-container {
  background-color: rgb(56, 163, 165);
  width: 600px;
  height: 100px;
  justify-content: center;
  align-items: center;
}

.top-container img {
  margin: auto;
}

.bottom-container {
  position: relative;
  background-color: rgb(128, 237, 153);
  height: 200px;
}

.top-container {
  display: flex;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>

  <button id="show-modal-btn">Show modal</button>

  <div id="overlay">
    <div id="modal">
      <div id="modal-form">
        <div class="top-container"><img id="icon" src="https://dummyimage.com/90/000/fff" width="90px"></div>
        <div class="bottom-container">
          <label for="email-input"></label>
          <input id="email-input" type="email" placeholder="Enter your email">
        </div>
      </div>
      <button id="close-modal-btn">Close Modal</button>
    </div>
  </div>

  <div class="website-content"></div>

  <script src="index.js"></script>

</body>

</html>

Upvotes: 1

Related Questions