Question

我正在尝试将图像居中。

我确信这是一个非常简单的解决方案，但是除了从头开始3次之外，我还尝试了几种解决方案。

#main_image {
  background-color: bisque;
  position: fixed;
  display: block;
  margin: 0 auto;
}

我已经尝试过边距：o自动，文本对齐：居中，相对和绝对定位。 https://codepen.io/lordrott/pen/GbJOQo

Answer 1

在#main_image字段的css文件中将您的位置更改为相对位置。应该可以。

#main_image {
  background-color: bisque;
  position: relative;
  display: block;
  margin: 0 auto;
}

Answer 2

或者，

#main_image {
  background-color: bisque;
  position: fixed;
  display: block;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 3

尝试一下，

  #main_image{
       position: relative;
       left: 300px;
       top:50px;
    }

Answer 4

您可以保留您的应用样式。只需添加：

/* Keep your applied style*/
figure {
  display: flex;
  justify-content: center;
}

或将其添加到您的图片

#main_image {
  left: 50%;
  transform: translate(-50%, 0);
}

Answer 5

这是您的解决方案

#main_image {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: bisque;
}

我无法将<div>居中，也无法理解为什么

5 个答案: