垂直居中图片文案_img 和文案垂直对齐-CSDN博客

本文链接：https://blog.csdn.net/kpbiao87/article/details/8696036
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="gbk">
	<title></title>
</head>
<body>
	<style type="text/css">
	* {margin:0;padding:0;}
	.warp{
		width: 1000px;
		height: 1000px;
		background: rgba(0,0,0,0.3);
	}
	.imgbox {
		width:200px;
		text-align:center;
		border:1px solid #f00;
		line-height:200px;
		height:200px;
		font-size:200px
		}
	*>.imgbox{
		font-size:12px
		}
	.imgbox img {
		vertical-align:middle
		}
	</style>
	
	<div class="warp">
		
		<div class="imgbox">
		<img src="http://img03.taobaocdn.com/bao/uploaded/i3/676649324/T2klpGXm8aXXXXXXXX_!!676649324.jpg_120x120.jpg" /> 
		</div>

	<style type="text/css">
	 
	.imgbox2{
		width: 200px;
		height: 200px; 
		border: 1px solid #f60;
		display: table-cell;
		vertical-align: middle;
		*display:block;
		*font-size: 174.6px;	
		*font-family:arial;	
		text-align: center;		
	}
	</style>
	<p>font-size:height*0.873</p>
	<div class="imgbox2">
		<img src="http://img03.taobaocdn.com/bao/uploaded/i3/676649324/T2klpGXm8aXXXXXXXX_!!676649324.jpg_120x120.jpg" alt=""/>
	</div>
	
	
	<style type="text/css">
	.imgbox3{
		width: 200px;
		height: 200px;		
		text-align: center;
		border: 1px solid #f40;
		
	}
	.imgbox3 img{
		vertical-align: middle;
    }
	.imgbox3 i{
		display: inline-block;
		height: 100%;
		width: 0;
		vertical-align: middle;
	}
	</style>
	<p>加标签</p>
	<div class="imgbox3">
		<img src="http://img03.taobaocdn.com/bao/uploaded/i3/676649324/T2klpGXm8aXXXXXXXX_!!676649324.jpg_120x120.jpg" alt=""/>
		<i></i>
	</div>
	
	<style type="text/css">
	.imgbox4{
		position: relative;
		width: 200px;
		height: 200px;
		border: 1px solid #ddd;
		
	}
	.imgbox4_inner{
		*position: absolute;
		*left: 50%;
		*top: 50%
	}
	.imgbox4_inner img{
		*position: relative;
		*left: -50%;
		*top: -50%
		vertical-align: middle
	}
	
	</style>
	<div class="imgbox4">
		<div class="imgbox4_inner">
			<img src="http://img03.taobaocdn.com/bao/uploaded/i3/676649324/T2klpGXm8aXXXXXXXX_!!676649324.jpg_120x120.jpg" alt=""/>
		</div>
	</div>
	
	<style type="text/css">
	.zxx_align_box_2{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}
.zxx_align_box_2 span.zxx_align_word{display:inline-block; font-size:0.1em; vertical-align:middle;}
	</style>
	<p>文字居中</p>
	<div class="zxx_align_box_2">
		<span class="zxx_align_word">这里显示多行文字。</span>
	</div>
	
	
	<style type="text/css">
		.warp{
			width: 200px;
			height: 150px;
			overflow: hidden;
			display: table;
			border: 1px solid #000;
			*position: relative;
		}
		.sub_warp{
			display: table-cell;
			vertical-align: middle;
			*position: absolute;
			*top: 50%;
		}
		.content{
			*position: relative;
			*top: -50%;
		}
	</style>
	 <div class="warp">
	 	<div class="sub_warp">
	 		<div class="content">
				垂直居中不<br/>
				啊哈哈
			</div>
	 	</div>
	 </div> 
	
	</div>
</body>
</html>