如何在HTML中居中图片|极客教程

如何在HTML中居中图片

在网站设计中，经常会遇到需要将图片居中显示的情况。在HTML中，有多种方法可以实现图片的居中显示，可以通过CSS样式或者使用HTML的标签属性来实现。下面我们将详细介绍如何在HTML中居中图片的方法。

使用CSS样式居中图片

方法一：使用text-align属性

通过将图片所在的父元素的text-align属性设置为center，可以实现图片的水平居中显示。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  .center-img {
    text-align: center;
  }
</style>
</head>
<body>

<div class="center-img">
  <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image">
</div>

</body>
</html>

Output:

如何在HTML中居中图片

方法二：使用margin属性

可以使用CSS的margin属性来实现图片的居中显示，通过设置左右外边距为auto来将图片水平居中。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  .center-img {
    margin: 0 auto;
    display: block;
  }
</style>
</head>
<body>

<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" class="center-img" alt="Centered Image">

</body>
</html>

Output:

如何在HTML中居中图片

方法三：使用flex布局

通过将图片所在的父元素设置为flex布局，并使用align-items属性设置为center，可以实现图片在父元素中垂直居中显示。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  .center-img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* 设置父元素高度 */
  }
</style>
</head>
<body>

<div class="center-img">
  <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image">
</div>

</body>
</html>

Output:

如何在HTML中居中图片

使用HTML标签属性居中图片

方法一：使用align属性

在img标签中使用align属性，并将其值设置为center，可以实现图片在水平方向上居中显示。

示例代码：

<!DOCTYPE html>
<html>
<body>

<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image" align="center">

</body>
</html>

Output:

如何在HTML中居中图片

方法二：使用style属性

可以直接在img标签中使用style属性来设置图片的样式，通过设置margin属性为auto来将图片水平居中。

示例代码：

<!DOCTYPE html>
<html>
<body>

<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image" style="display: block; margin: 0 auto;">

</body>
</html>

Output:

如何在HTML中居中图片

方法三：使用表格

通过在表格中插入图片，可以实现图片在表格中居中显示。

示例代码：

<!DOCTYPE html>
<html>
<body>

<table style="margin: 0 auto;">
  <tr>
    <td><img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image"></td>
  </tr>
</table>

</body>
</html>