如何将图像中心放在 html 堆栈溢出中 - Html

在 HTML 中，我们有多种方法来将图像居中对齐。本文将介绍一些最常见的方法来实现将图像置于中心位置。

使用 CSS 居中图像

CSS 提供了一种相对简单方式来居中图像，并且不需要更改 HTML 标记。下面是一个示例代码：

<style>
  .img-center {
    display: block;
    margin: 0 auto;
  }
</style>
<img src="example.jpg" alt="example" class="img-center">

在上面示例代码中，我们将 .img-center 这个 class 应用于 img 标签上。同时，我们使用 CSS 属性 display: block 将其转换为块级元素使其具备宽度自适应的能力，同时也使其能够被居中对齐。然后是 margin: 0 auto 属性，该属性将使图像水平居中对齐。

使用 JS 代码动态计算图像位置

如果您需要在运行时动态计算图像位置并将其居中，则可以使用一些 JS 代码来实现。下面是一个示例代码：

<div id="image-container">
  <img src="example.jpg" alt="example">
</div>

<script>
  function centerImage() {
    var container = document.getElementById('image-container');
    var img = container.getElementsByTagName('img')[0];
    var height = img.height;
    var containerHeight = container.clientHeight;
    var marginTop = (containerHeight - height) / 2;
    img.style.marginTop = marginTop + 'px';
  }
  centerImage();
  window.addEventListener('resize', centerImage); // 监听窗口大小变化
</script>

在上面的代码中，我们首先创建一个包含图像的容器，然后使用 JS 代码来计算容器和图像的高度。之后，我们需要计算出图像顶部和容器顶部之间的距离并将其分配给图像。最后，我们需要将该功能添加到一个监听器上以监听窗口大小更改。

使用 Grid 布局

使用新的 CSS Grid 布局也可以实现居中图像的效果。这种方法要求所有图像都位于网格容器的中央单元格中，代码示例如下：

<style>
  .grid-container {
    display: grid;
    height: 100vh;
    justify-content: center;
    align-items: center;
  }
  img {
    grid-area: 1 / 1 / 2 / 2;
    max-width: 100%;
    max-height: 100%;
  }
</style>

<div class="grid-container">
  <img src="example.jpg" alt="example">
</div>

在上面示例代码中，我们首先创建一个 .grid-container 容器，将其设置为 display: grid。随后，我们使用 CSS 属性 justify-content 和 align-items 将图像居中对齐。最后，我们将 img 标记的网格区域设置为 1/1/2/2，以确保它只占用一个单元格并自适应容器大小。