CSS实现图片居中显示文字
微信号
AI自助建站398元：18925225629
1. 使用`text-align: center;`属性
`text-align: center;`属性可以使文本水平居中显示。若要将图片居中显示，可将图片置于文本中，然后使用`text-align: center;`属性使文本居中，间接地使图片居中显示。
CSS代码如下：
```
.container {
text-align: center;
}
.image {
display: inline-block;
}
```
2. 使用`margin: 0 auto;`属性
`margin: 0 auto;`属性可以使块级元素水平居中显示。若要将图片居中显示，可将图片置于块级元素中，然后使用`margin: 0 auto;`属性使块级元素居中，间接地使图片居中显示。
CSS代码如下：
```
.container {
display: block;
margin: 0 auto;
}
.image {
display: block;
}
```
3. 使用`flexbox`布局
使用`flexbox`布局可以轻松实现图片居中显示。
CSS代码如下：
```
.container {
display: flex;
justify-content: center;
align-items: center;
}
.image {
width: 100px;
height: 100px;
}
```
4. 使用`grid`布局
使用`grid`布局也可以实现图片居中显示。
CSS代码如下：
```
.container {
display: grid;
grid-template-columns: repeat(1, auto);
justify-content: center;
align-items: center;
}
.image {
width: 100px;
height: 100px;
}
```
5. 使用绝对定位
使用绝对定位也可以实现图片居中显示。
CSS代码如下：
```
.container {
position: relative;
}
.image {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
```
微信号
AI自助建站398元：18925225629
相关文章
发表评论