CSS Flexbox正在复制div

zpf6vheq  于 2023-03-20  发布在  其他
关注(0)|答案(3)|浏览(144)

我使用CSS flex box来使img在div元素中居中。但是在我给出了display:flex;属性添加到我的容器Google chrome Web浏览器显示两个相邻的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;
}
<div>
  <img src="picture.jpg" alt="">
</div>

我用开发工具检查了一下。我删除了重复的div。但是在我保存代码后它又开始出现了。每次我保存代码它又回来了。请帮助我解决这个问题。

7y4bm7vi

7y4bm7vi1#

正如@ray所说,一定有什么东西注入了额外的div(它不是live-server,因为它没有注入div,它只重新加载页面并处理CSS刷新)。
它可能是由浏览器扩展注入的,通常是隐藏的。
检查额外的div上的样式,如果有任何不是来自你的样式,它们一定来自某个地方;你可以检查它们的来源(文件名等),并可能追踪到罪魁祸首。
由于您的样式只使用了一个元素选择器,因此它适用于页面上的所有div,包括额外注入的元素。
旁白:除了基本样式(CSS重置、基本排版等)之外,使用裸元素选择器通常是个坏主意,尤其是在div s这样的通用元素上。

x8goxv8g

x8goxv8g2#

你可以试着把属于你边框的div分类。你也应该相应地编辑你的css文件。所以那些值 不是对每个div都有效。第二个可见边框可以是live服务器自动分配的任何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;
}

.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>
6jygbczu

6jygbczu3#

您的CSS代码中可能存在问题。请尝试此操作。
基本上,您只需要将align-items: center;添加到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

相关问题