如何在HTML中居中图片|极客笔记

如何在HTML中居中图片

在网页设计中，经常会遇到需要在页面中居中显示图片的情况。在HTML中，有多种方法可以实现图片的居中显示。本文将介绍一些常用的方法和技巧来实现在HTML中居中显示图片。

使用CSS的text-align属性

可以使用CSS的text-align属性来将图片水平居中显示。将图片包裹在一个具有text-align:center样式的容器中，即可实现图片的水平居中显示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="center">
        <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image">
    </div>
</body>
</html>

Output:

如何在HTML中居中图片

使用CSS的margin属性

另一种常用的方法是使用CSS的margin属性来实现图片的居中显示。通过设置图片的左右margin为auto，可以使图片在页面中水平居中显示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <img class="center" src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image">
</body>
</html>

Output:

如何在HTML中居中图片

使用CSS的flex布局

Flex布局是一种灵活的布局方式，可以轻松实现各种布局效果，包括图片的居中显示。通过将父元素设置为display:flex，并且使用justify-content:center和align-items:center属性，可以实现图片的水平和垂直居中显示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image">
    </div>
</body>
</html>

Output:

如何在HTML中居中图片

使用CSS的position属性

通过设置图片的position属性为absolute，并且将左侧和顶部的值都设置为50%，可以实现图片在页面中居中显示。另外，还需要通过transform属性来调整图片的位置，将其移动至中心位置。

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <img class="center" src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image">
</body>
</html>

使用CSS的grid布局

CSS的grid布局也是一种常用的布局方式，可以轻松实现图片的居中显示。通过将父元素设置为display:grid，并且使用place-items:center属性，可以实现图片的水平和垂直居中显示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: grid;
            place-items: center;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image">
    </div>
</body>
</html>

Output:

如何在HTML中居中图片

使用HTML的align属性

在HTML4中，可以使用align属性来实现图片的居中显示。将图片的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中居中图片

使用HTML的center标签

虽然不推荐使用，但在一些老旧的网页中仍然可以使用center标签来实现图片的居中显示。将图片包裹在center标签中，即可实现图片的居中显示。

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

Output:

如何在HTML中居中图片

使用HTML的table布局

在一些情况下，也可以使用HTML的table布局来实现图片的居中显示。创建一个包含单元格的表格，将图片放置在单元格中，即可实现图片的居中显示。

<!DOCTYPE html>
<html>
<body>
    <table>
        <tr>
            <td align="center"><img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image"></td>
        </tr>
    </table>
</body>
</html>

Output:

如何在HTML中居中图片

使用JavaScript动态设置居中

除了使用CSS和HTML来实现图片的居中显示，还可以使用JavaScript来动态设置图片的位置，从而实现居中显示。通过获取图片的宽度和高度，再计算出图片的左上角坐标，可以将图片放置在页面的中心位置。

<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload = function() {
            var img = document.getElementById("image");
            var screenWidth = window.innerWidth;
            var screenHeight = window.innerHeight;
            var imageWidth = img.width;
            var imageHeight = img.height;
            var left = (screenWidth - imageWidth) / 2;
            var top = (screenHeight - imageHeight) / 2;
            img.style.left = left + "px";
            img.style.top = top + "px";
        }
    </script>
</head>
<body>
    <img id="image" src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image" style="position: absolute;">
</body>
</html>