html中图片居中代码

HTML是网页编程的基础语言，其中图片的位置摆放很重要，而实现图片的居中是一个比较常见的问题。在本文中，我们将介绍如何使用HTML代码来完成图片居中的效果。 首先，我们需要使用HTML的img标签来插入图片，如下所示：

      <img src="图片地址" alt="图片描述">

其中，src是图片的地址，alt是图片的描述。 接下来，我们可以使用CSS来控制图片的居中，通过给img标签添加样式来实现效果。具体代码如下：

      <style>
            img {
                  display: block; /* 将图片转为块级元素 */
                  margin: 0 auto; /* 设定左右 margin 为自动，实现图片水平居中 */
            }
      </style>

在上述代码中，我们给img标签添加一个CSS样式，使图片转变为块级元素，并把左右margin设定为自动。这样就可以实现图片水平居中的效果了。 如果想要实现图片水平和垂直居中，可以使用CSS的flex布局来实现。具体代码如下：

      <style>
            .container {
                  display: flex; /* 使用 flex 布局 */
                  justify-content: center; /* 水平居中 */
                  align-items: center; /* 垂直居中 */
            }
            img {
                  display: block;
            }
      </style>

      <div class="container">
            <img src="图片地址" alt="图片描述">
      </div>

在上述代码中，我们给容器元素添加了CSS的flex布局，其中justify-content:center可以实现水平居中，align-items:center可以实现垂直居中，这样就完成了图片的水平和垂直居中。 总结：通过以上的方法，我们可以使用HTML代码实现图片的水平居中和水平垂直居中，让网页更加美观和舒适。