html 使用CSS控制图片垂直居中来自http://www.jb51.net/web/71728.html

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用CSS控制图片垂直居中来自http://www.jb51.net/web/71728.html相关的知识，希望对你有一定的参考价值。

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>图片垂直居中demo</title>
</head>
<style>
	/*全局样式*/
	body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }
	body, button, input, select, textarea { font: 12px/1.5 Arial,"microsoft yahei","微软雅黑E\8F6F\96C5\9ED1"; }
	ul { list-style: none; }
	img { border: none; }
	/*清除浮动样式*/
	.clear-fix:after { content: '.'; display: block; height: 0; visibility: hidden; clear: both; }
	.clear-fix: { zoom: 1; }
	.box { width: 800px; margin: 100px auto; }
	.pic-wrap {
		width: 220px;
		height: 220px;
		border: 1px solid #F00;
		/*标准浏览器模拟表格居中*/
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		/*防止由字体及行高把容器撑大*/
		font-size: 0;
		line-height: 1;
		*display: block;
		+line-height: 220px;
		_font-size: 192px; /* 字体大小等于height/1.14 */
		_font-family: sans-serif;
	}
	.pic-wrap img {
		display: inline; /*图片必须为行内元素*/
		vertical-align: middle;
	}
</style>
<body>
	<div class="box">
		<a href="" class="pic-wrap" target="_blank">
		<img src="http://img01.taobaocdn.com/tps/i1/T1LZ.8XdVcXXcb7DQt-185-205.jpg" alt="来源xxx" title="来源xxx">
		</a>
	</div>
</body>
</html>

以上是关于html 使用CSS控制图片垂直居中来自http://www.jb51.net/web/71728.html的主要内容，如果未能解决你的问题，请参考以下文章

转 Div+Css控制背景图片水平垂直居中显示 背景铺满全屏

css精灵如何控制图片垂直显示

使用CSS3伸缩盒实现图片垂直居中

怎么使用CSS让图片水平垂直都居中？

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

HTML CSS中如何实现DIV中的图片水平垂直居中对齐