目录
suibi

css图片居中对齐代码怎么设置(css怎么设置图片水平居中)


前端开发中经常用的图片水平垂直居中CSS

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

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

CSS:

<style type="text/css">

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

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

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

.img-container span a img{max-width:120px;max-height:120px; }

</style>

代码:

<div class="img-container">

<span>

<a href=""><img src="https://img0.baidu.com/it/u=4137924777,4215971248&fm=26&fmt=auto&gp=0.jpg" alt=""></a>

</span>

<span>

<a href=""><img src="https://img1.baidu.com/it/u=415185236,4221481113&fm=26&fmt=auto&gp=0.jpg" alt=""></a>

</span>

<span>

<a href=""><img src="https://img2.baidu.com/it/u=1654250371,945534091&fm=11&fmt=auto&gp=0.jpg" alt=""></a>

</span>

</div>

前端开发中经常用的图片水平垂直居中CSS

写笔记

咨询

您的电子邮箱地址不会被公开。