css图片居中对齐css图片垂直居中对齐怎么设置css图片如何居中对齐



免费领取服务器

点击领取

css图片居中对齐css图片垂直居中对齐怎么设置css图片如何居中对齐

2022-07-21 2:26:03 网络知识 官方管理员

css图片居中对齐(css图片垂直居中对齐怎么设置)(1)

无论是做web前端还是手机端的前端页面,我们经常会用到的就是图片不规则,而我们又需要这个图片在容器上以水平垂直居中显示,如上图。

其实这个也很简单,直接上我写的样式:

CSS:

<styletype="text/css">

.img-container{ width:100%;float:left}

.img-containerspan{ width:120px;height:120px;overflow:hidden;position:relative;text-align:center;vertical-align:middle;border:#ccc1pxsolid;float:left;margin-left:20px;padding:7px;display:block;}

.img-containerspana{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

.img-containerspanaimg{max- width:120px;max-height:120px;}

</style>

代码:

<divclass="img-container">

<span>

<ahref=""><img src="https://img.pc-daily.com/uploads/allimg/220107/16254J1M-1.jpg" alt=""></a>

</span>

<span>

<ahref=""><img src="https://img.pc-daily.com/uploads/allimg/220107/16254H194-2.jpg" alt=""></a>

</span>

<span>

<ahref=""><img src="https://img.pc-daily.com/uploads/allimg/220107/16254G112-3.jpg" alt=""></a>

</span>

</div>

css图片居中对齐(css图片垂直居中对齐怎么设置)(2)

发表评论:

最近发表
网站分类
标签列表