如何将图像保持在div的中心位置？row text-center和margin-auto都没有起作用。

10 浏览
0 Comments

如何将图像保持在div的中心位置？row text-center和margin-auto都没有起作用。

我有一些具有不同宽度的图片，需要将它们保持在各自div的中心位置。我需要考虑所有的边距-上、下、左、右。它们应该位于div的中心位置，而不是顶部中心位置。因此，class="row text-centre"和class="center-block"无法帮助。我尝试过改变边距，但由于图片的宽度不同，这是不可能的。我想知道是否有办法让任何宽度的图片都保持在其div的中心位置。

0

3 答案

0 Comments

问题的原因是使用了错误的CSS类或属性，导致无法将图像居中在div中。解决方法是使用正确的CSS类或属性来实现图像的居中。

首先，如果使用了bootstrap框架，可以尝试给图片添加center-block类，这将使图片居中显示。然而，这种方法可能不起作用。

另一种方法是使用Absolute-Center类。这个类通过设置position为absolute，并将top、left、bottom和right属性都设置为0，实现了图像在div中水平和垂直居中。需要注意的是，这个类必须添加到a标签中的图片上。

然而，有用户提出这个方法只能实现左右居中，无法实现上下居中。于是，提出了一个修改后的Absolute-Center类，将margin属性设置为auto，这样就可以实现图像在div中水平和垂直居中。

然而，有用户测试后发现这个修改后的Absolute-Center类仍然无法实现图像的上下居中。因此，建议尝试使用这个修改后的类，如果不起作用，可能需要寻找其他解决方法。

总结一下，解决这个问题的方法是使用正确的CSS类或属性来实现图像在div中的居中。可以尝试使用bootstrap的center-block类或修改后的Absolute-Center类，但需要注意可能会出现无法实现上下居中的情况。如果这些方法都无效，可能需要寻找其他解决方法。

0
0 Comments

问题原因：无法将图像居中对齐的原因可能是没有正确设置div的样式。

解决方法：可以尝试使用以下CSS样式来使图像居中对齐。

.img-container{
   position: relative;
   /* 设置一些宽度和高度，可以尝试使用width: auto, 100%, 800px和固定高度来进行测试 */
   display: table;
}
.img-container .img-div{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

将上述代码添加到对应的HTML文件中，即可实现图像居中对齐。

0
0 Comments

问题原因：div的高度不正确，导致图片无法居中。

解决方法：使用CSS样式设置div的高度，并使用垂直对齐属性使图片居中。同时，移除图片的宽度设置，使用CSS样式控制图片的显示大小。

代码如下：

.img-div:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.img-div {
  height: 400px;
  position: relative;
  text-align: center;
}
.img-div img {
  vertical-align: middle;
}

这样就可以使图片居中显示在div中了。如果想要显示不同宽度的图片，只需要在img标签上设置不同的宽度即可。

0