Question 43975 in Html Question posted in
Some basic documentation can be found here.

CSS Flexbox is Duplicating divs – Html

I use CSS flex box to center a img inside of a div element. But After I gave the display:flex; property to my container Google chrome web browser shows two div element next to each other.

Output

This is my code.

body {
  background-color: rgb(39, 39, 39);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

img {
  width: 200px;
  /* margin: 20px; */
  align-self: center;
  justify-self: center;
  border: 1px solid white;
  padding: 40px;
  border-radius: 200px;
}

div {
  width: 350px;
  height: 400px;
  border: 1px solid white;
  border-radius: 200px;
  padding: 40px;
  display: flex;
}
<div>
  <img src="picture.jpg" alt="">
</div>

I use dev tools to inspect this.I delete the duplicated div. But after I save the code it start to show up again. Every time I save the code it comes back. Please help me to solve this.

Tags:

3

Answers


  1. 0

    Looks like a problem in your CSS code. Try this instead.

    Basically you just need to add align-items: center; to your div

    body {
  background-color: rgb(39, 39, 39);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

img {
  width: 200px;
  /* margin: 20px; */
  align-self: center;
  justify-self: center;
  border: 1px solid white;
  padding: 40px;
  border-radius: 200px;
}

div {
  width: 350px;
  height: 400px;
  border: 1px solid white;
  border-radius: 200px;
  padding: 40px;
  display: flex;
  align-items: center; /* add this line to center img vertically */
}

    This is the result

    Login or Signup to reply.
  2. 0

    You can try to classify the div which is belongs to your borders. You should also edit your css file accordingly. So those values ​​will not be valid for every div. The second visible borders can be any div that the live server automatically assigns. I hope I was able to convey my thoughts. For example you can write like this

    body {
  background-color: rgb(39, 39, 39);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

img {
  width: 200px;
  /* margin: 20px; */
  align-self: center;
  justify-self: center;
  border: 1px solid white;
  padding: 40px;
  border-radius: 200px;
}

.borders {
  width: 350px;
  height: 400px;
  border: 1px solid white;
  border-radius: 200px;
  padding: 40px;
  display: flex;
}
    <div class="borders">
  <img src="picture.jpg" alt="">
</div>
    Login or Signup to reply.
  3. 0

    As @ray says, something must be injecting the extra div. (It is not live-server, as it does not inject a div, it only reloads the page and handles CSS refreshes.)
    It is probably a injected by a browser extension and normally hidden.
    Check the styles on the extra div. If there are any styles that are not from you, they must have come from somewhere; you can check their source (filename, etc.) and probably track down the culprit.

    As your styling uses just an element selector, it applies to all divs on the page, including the extra injected one.
    Aside: Using bare element selectors for anything but base styles (CSS reset, base typography, etc.) is usually a bad idea, especially on generic elements like divs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search