纯css实现div容器内图片上下左右居中

2025-06-09 08:17:13

1、新建html文档。

纯css实现div容器内图片上下左右居中

3、书写hmtl代码。<div class="aaa"><a href="#"><img src="images/aaa.jpg"/></a></div>

纯css实现div容器内图片上下左右居中

5、书写css代码。.aaa{ width:600px; height:400px; margin:100px auto;text-align:center;vertical-align:middle;display:block;position:relative; background:#ddd;}.aaa a{display:table-cell;vertical-align:middle;width:600px; height:400px; }.aaa a img{max-width:600px;max-height:400px; }

纯css实现div容器内图片上下左右居中

8、查看效果。

纯css实现div容器内图片上下左右居中
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢