Question

我正在关注有关初学者的HTML和CSS的一些教程。我试图在div中居中放置图像，但是当我将窗口的宽度缩小到某个像素时，图像的右边距越来越少。这是我拍摄的照片：https://imgur.com/Ihz0OeY。这是CSS代码：

.bg-image {
  background-image: url("res/img/testbackground.jpg");
  filter: blur(8px);
  -webkit-filter: blur(8px);
  width: 100%;
  height: calc(100vh - 56px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

bg-text {
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.4);
  color: white;
  position: relative;
  left:50%;
  top:50%;
  font-weight: bold;
  transform: translate(-50%, -150%);
  border: 3px solid #f1f1f1;
 width: 80%;
  padding: 20px;
 text-align: center;
}

.bg-text img {
  width:200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

我使用position：relative，因为如果使用绝对，则导航栏扩展时不会向下推文本。 HTML代码没什么特别的，这是我从Bootstrap中获得的导航栏。

  <div class="bg-image"></div>
  <div class="bg-text">
      <img id ="1" src="res/img/dog.png" alt="">
       <h1>12345</h1>
       <p>ABCDEF</p>
   </div>

你们能帮我吗？非常感谢。

Answer 1

问题是您的img元素大于屏幕宽度的中心宽度。使用流体宽度解决此问题：

.bg-text img {
  width:90%;
  display: block;
  margin: 0 auto;
}

默认情况下，块级元素始终向左对齐，这意味着如果您不使用基于百分比的宽度告诉该元素包含在窗口中，则该元素将保持其静态宽度（在这种情况下为200px）即使窗口缩小到超过该数量也是如此。因此，页边距似乎在右边缩小。如果您使用的是基于像素的宽度，则始终最好将其声明为max-width，然后将基于百分比的宽度定义为后备广告，例如：

.bg-text img {
  width:100%;
  max-width:200px;
  display: block;
  margin: 0 auto;
}

这意味着只要父元素的宽度大于200px，该元素的宽度将为200px并居中。如果父元素的宽度小于200px，则该元素将自动变为其父元素宽度的100％。

Answer 2

您想要这个吗？ https://imgur.com/qkJP8pg

https://www.w3schools.com/code/tryit.asp?filename=G5P5BKV1XGGL

.bg-text img {
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom:0;
    margin: auto;
    width:90%;
}

Answer 3

在HTML中：

 <img src="..." class="mx-auto d-block">

或在CSS中：

.bg-text img{
margin: auto;
display-block;
}

将div中的图像元素居中

3 个答案: