图片居中的几种方式

2021-01-19

原创字数统计: 633 | 阅读时长: 3分

src=htt16db1_1440w.jpg_source=172ae18b&refer=http___pic1.zhimg

三种方式实现图片居中。

1、空白元素法(最麻烦)

设置父元素text-align:center
子元素必须display:inline-block;并且vertical-align:middle;
子元素右边加同级元素（不带空格），并且给其声明：
1
2
3
4
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
2、通用方法
设置父元素
1
height = line-height

子元素

1 2	display:inline-block; vertical-align: middle;

3、flex布局

父元素直接设置

1
2
3

display:flex;
justify-content:center;
align-items:center

参考代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片居中法</title>
		<style>
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.wrap{
				margin-top: 10px;
			}
			.album1,.album2,.album3{
				width: 1020px;
				height: 240px;
				border: 1px solid #333333;
				margin: 0 auto;
			}

			.album1 li,.album2 li,.album3 li{
				float: left;
				width:202px;
				height: 238px;
				border: 1px solid #00008B;
				text-align: center;
			}
			.pic img{
				vertical-align:middle;
			}
			.pic img:nth-child(2){
				height: 100%;
			}
            /* 方法一 */
			.pic span{
				vertical-align:middle;
				width: 0;
				height: 100%;
				display: inline-block;
			}
            /* 方法二 */
			.album3 li{
				line-height: 238px;
			}
			.album3 li img{
				vertical-align: middle;
			}
			/* 方法三 */
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul class="album1">
				<li class="pic"><img src="images/jdpic_03.jpg" ><img></li>
				<li class="pic"><img src="images/jdpic_06.jpg" ><img></li>
				<li class="pic"><img src="images/jdpic_08.jpg" ><img></li>
				<li class="pic"><img src="images/jdpic_11.jpg" ><img></li>
				<li class="pic"><img src="images/jdpic_13.jpg" ><img></li>
			</ul>
		</div>
		<!-- album1,album2是同一种方法-->
		<div class="wrap">	
			<ul class="album2">
				<li class="pic"><img src="images/jdpic_20.jpg" ><span></li>
				<li class="pic"><img src="images/jdpic_21.jpg" ><span></li>
				<li class="pic"><img src="images/jdpic_22.jpg" ><span></li>
				<li class="pic"><img src="images/jdpic_23.jpg" ><span></li>
				<li class="pic"><img src="images/jdpic_24.jpg" ><span></li>
			</ul>
		</div>
		<div class="wrap">
			<ul class="album3">
				<li><img src="images/jdpic_20.jpg" ></li>
				<li><img src="images/jdpic_21.jpg" ></li>
				<li><img src="images/jdpic_22.jpg" ></li>
				<li><img src="images/jdpic_23.jpg" ></li>
				<li><img src="images/jdpic_24.jpg" ></li>
			</ul>
		</div>
	</body>
</html>

本文作者： 本该如此
本文链接： https://anyway521.github.io/post/ab089167.html
最后更新： 2021年01月31日 21:33:48
版权声明： 博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！

1、空白元素法(最麻烦)

2、通用方法

3、flex布局