html5图片垂直居中

最新推荐文章于 2025-04-24 15:15:22 发布

清风半夜鸣蝉

最新推荐文章于 2025-04-24 15:15:22 发布

阅读量1.6w

点赞数 2

分类专栏： html5 文章标签： html5 图片垂直居中

本文链接：https://blog.youkuaiyun.com/ys5773477/article/details/52754111

版权

html5 专栏收录该内容

5 篇文章

订阅专栏

html5图片居中:主要的思路是用table或者table-cell，还有一种不太了解，贴在最后。

一：显式使用table标签

这是只需要定义内容的CSS样式为table-cell的，并垂直居中。

<style>
		html {
			height:100%;
		}
		body {
			/*background-color:#FFFFFF;*/
			margin:0;
			/*height:100%;*/
			background: #FFFFFF url(${pageContext.request.contextPath }/resources/js/h5/bcg.png) no-repeat fixed center;
			background-position:center;
			background-size:100%;
		}
		/* 这里用span或者img都可以 */ 
		#box span{
			display:table-cell;
			vertical-align:middle;
		}
	</style>

<!doctype html>
<html>
<body>
<div id="box">
    <table width="100%" height="100%">
        <tr>
            <td align="center">
                <img src="${imgPath}" width="10" />
            </td>
        </tr>
    </table>
</div>
</body>
</html>

二：隐式定义div的table显示

<style>
		html {
			height:100%;
		}
		body {
			/*background-color:#FFFFFF;*/
			margin:0;
			/*height:100%;*/
			background: #FFFFFF url(${pageContext.request.contextPath }/resources/js/h5/bcg.png) no-repeat fixed center;
			background-position:center;
			background-size:100%;
		}
		/* 隐式指定显示类型为table */
		#box{
			width:100%;height:100%;
			display:table;
			text-align:center;
			/*background-color: #00FF00;*/
		}
		/* 这里要定义内标签span的居中 */ 
		#box span{
			display:table-cell;
			vertical-align:middle;
		}
	</style>

<!doctype html>
<html>
<body>
<div id="box">
  <span><img src="${imgPath}" width="100" /></span>
</div>
</body>
</html>

三：不使用table系列

<style>
		html {
			height:100%;
		}
		body {
			/*background-color:#FFFFFF;*/
			margin:0;
			/*height:100%;*/
			background: #FFFFFF url(${pageContext.request.contextPath }/resources/js/h5/bcg.png) no-repeat fixed center;
			background-position:center;
			background-size:100%;
		}

		div{
			width:100%;height:100%;
			text-align:center;
		}
		div span{
			height:100%;width:0;
			overflow:hidden;
			display:inline-block;
			vertical-align:middle;
		}
		img{
			vertical-align:middle;
		}
	</style>

<!doctype html>
<html>
<body>
<div id="test">
  <img src="${imgPath}" width="100"/>
  <span></span>
</div>
</body>
</html>