Question

我正在使用Materialize CSS，无法在div内垂直和水平居中放置图像，margin: 0 auto根本不起作用。

.blockA {
  border: 1px solid black;
}

.imgA {
  border: 1px solid red;
  margin: 0 auto;
  width: 100px;
}

.textA {
  border: 1px solid blue;
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <div class="container">
      <div class="row blockA">
        <img class="imgA" src="http://via.placeholder.com/350x150">
        <p class="textA center-align">
          TEXT
        </p>

      </div>
    </div>

请帮助！

Answer 1

如果我正确理解您的目标，有两种方法可以实现您想要的目标：

用新的div包装图片并为其分配以下样式：

.image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

但是在这种情况下，图像包装器内部将没有任何填充物，因此它将粘在其边缘。

再次，用div包装图像，然后分配以下内容：

.image-wrapper {
  padding: 1em;
  text-align: center;
}

margin: 0 auto不适用于图片，因为它是一个内联元素。您可以将内联元素与text-align属性对齐。但是，您可以通过将display: block应用于内联元素来制作一个块元素。

希望有帮助！

如何在div中垂直和水平居中放置图像？

1 个答案: