table的应用

来源：互联网发布：我的世界js制作器教程编辑：程序博客网时间：2024/06/08 12:00

如何使多个不同比例的图片，上下水平居中

方法一：

给 a 标签设置背景图片

<!DOCTYPE html><html><head><title>多个不同比例图片上下水平居中</title><style type="text/css">ul{margin: 0 auto;padding:0;list-style-type: none;width: 930px;overflow: hidden;}ul li{width: 300px;height: 300px;background: gray;float:left;display:table;text-align: center;margin-right: 10px;}ul li a{display: table-cell;}ul .one a{background: url("img/one.jpg") center center no-repeat;background-size: contain;}ul .two a{background: url("img/two.jpeg") center center no-repeat;background-size: contain;}ul .three a{background: url("img/three.jpg") center center no-repeat;background-size: contain;}</style></head><body><ul><li class="one"><a href="###"></a></li><li class="two"><a href="###"></a></li><li class="three"><a href="###"></a></li></ul></body></html>

方法二：

给 a 标签包裹一个img标签

<!DOCTYPE html><html><head><title>多个不同比例图片上下水平居中</title><style type="text/css">ul{margin: 0 auto;padding:0;list-style-type: none;width: 930px;overflow: hidden;}ul li{width: 300px;height: 300px;background: gray;float:left;text-align: center;margin-right: 10px;overflow: hidden;}ul li a{display: table-cell;vertical-align: middle;}ul li div{display: table;width: 300px;height: 300px;text-align: center;}ul li .two{margin:0 10px;}ul li img{max-width: 300px;max-height: 300px;}</style></head><body><ul><li class="one"><div><a href="###"><img src="img/one.jpg"></a></div></li><li class="two"><div><a href="###"><img src="img/two.jpeg"></a></div></li><li class="three"><div><a href="###"><img src="img/three.jpg"></a></div></li></ul></body></html>

实现效果：

阅读全文

0 0

table的应用

如何使多个不同比例的图片，上下水平居中

table的应用