在页面布局时经常需要对图片的位置进行处理,这篇文章围绕图片居中展开,主要讲了如何用CSS实现图片的水平居中,图片垂直居中,还有图片的水平垂直居中,课程比较实用,感兴趣的小伙伴,可以参考一下,希望对你有所帮助。
1、text-align: center实现图片水平居中
text-align一般用于文本的水平居中,也可以用于图片,代码如下:
CSS部分:
div{
text-align: center;
width: 500px;
border: green solid 1px;
}
HTML部分:
效果图:
2、line-height和text-align: center 实现图片的水平垂直居中
设置line-height的值等于height,可以实现垂直居中,text-align: center可以实现水平居中。HTML部分一样,CSS代码如下:
div{
text-align: center;
width: 400px;
height:200px;