技术文摘
如何设置 CSS 图片居中
2025-01-09 19:12:44 小编
如何设置CSS图片居中
在网页设计中，图片的居中显示是一项常见且重要的任务。合理的图片居中布局能够提升页面的美观度和用户体验。下面将介绍几种常用的CSS设置图片居中的方法。
水平居中
方法一：使用 text-align: center
如果图片是内联元素或者被包含在块级元素中，可以将其父元素的 text-align 属性设置为 center。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="your-image.jpg" alt="示例图片">
</div>
</body>
</html>
这种方法适用于内联元素和内联块元素的水平居中。
方法二：使用 margin: 0 auto
当图片是块级元素时，可以设置其左右外边距为 auto，并指定宽度。示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
img {
display: block;
width: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<img src="your-image.jpg" alt="示例图片">
</body>
</html>
垂直居中
方法：使用 flexbox 布局
通过设置父元素为 display: flex，并使用 align-items: center 和 justify-content: center 属性，可以实现图片在父元素中的垂直和水平居中。示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
}
</style>
</head>
<body>
<div class="container">
<img src="your-image.jpg" alt="示例图片">
</div>
</body>
</html>
以上就是几种常见的CSS设置图片居中的方法，根据不同的布局需求，选择合适的方法可以轻松实现图片的居中显示，让网页更加美观和专业。