上传的图片未在Safari上居中

Question

我从用户上传图像并将其显示在我的页面上。我还有一个画布，用于标记图像上的线条。我想将图像显示在与画布相同的中心位置。现在，图像图像显示从中间开始。该问题在Firefox和Chrome上不存在，而仅在Safari上存在。我在此项目中也使用了materialize.css。如何在精确的中心显示图像？

    <style>
      .image {
        position: absolute;
        z-index: 1;
      }
      .container {
        display: inline-block;
        margin: 0 auto;
        position: relative;
        width: 100%;
      }
      .canvas {
        position: relative;
        z-index: 20;
      }
    </style>


    <div class="container">
      <img
        width="400"
        height="400"
        class="image"
      />
      <canvas width="400" height="400" class="canvas" />
    </div>

红色是我的形象

Answer 1

有很多方法可以使图像居中。在您的情况下，建议您使用display: block; margin: 0 auto;并为其指定一个max-width: 400px; width: 100%;，以便图像始终保持宽高比并且不会变得比您想要的大。

如果使用width: 400px，当它到达宽度较小的设备（电话）时，将使页面滚动，这是不好的UX。此外，您通常不需要height: 400px。添加实际图像时，让图像自动填充高度。

此外，避免在标记上放置样式。所有样式都应在组织的CSS中。

通过一门课程来学习HTML / CSS的基础知识。是否使用Bootstrap，Materialize，Bulma等并不重要。所有这些都取决于基础知识。

.image {
        display: block;
          margin: 0 auto;
          max-width: 400px;
          width: 100%;
          height: 400px;
          border: 1px solid lightgray;
      }

Check code on codepen here。