table的应用

最新推荐文章于 2022-07-20 11:07:00 发布

萝卜儿

最新推荐文章于 2022-07-20 11:07:00 发布

阅读量242

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/uniquehzx/article/details/77652487

版权

web前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

方法一：

给 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

收藏

觉得还不错? 一键收藏
0
评论
table的应用

如何使多个不同比例的图片，上下水平居中方法一：给 a 标签设置背景图片 &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;多个不同比例图片上下水平居中&lt;/title&gt; &lt;style type="text/css"&gt; ul{ margin: 0
复制链接

扫一扫