[2示例]如何使用CSS将div中的图像居中对齐（垂直和水平）
作者:admin 时间:2022-9-9 15:0:48 浏览:在本文中，我们将了解如何使用 CSS 将 div 标签中的图像居中对齐，并通过示例了解其实现。给定一个图像，我们需要将图像设置为与更大 div 内的中心（垂直和水平）对齐。这可以通过使用元素的位置属性来完成。
示例 1：本示例使用position属性使图像居中对齐。
<!DOCTYPE html>
<html>
<head>
<style>
#Outer {
border: 2px solid black;
height: 300px;
position: relative;
}
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="Outer">
<img src="1.gif" />
</div>
</body>
</html>
输出
示例 2：此示例使用center属性将图像设置为在 div 中居中。我们也可以使用这种方法将项目对齐到中心。
<!DOCTYPE html>
<html>
<head>
<style>
#Outer {
border: 2px solid black;
height: 300px;
background: url(1.gif)
no-repeat center center;
}
</style>
</head>
<body>
<div id="Outer"></div>
</body>
</html>
输出：从输出中，我们可以看到输出与之前的输出相同。
相关文章
相关文章
x
- 站长推荐
