CSS之未知高度img垂直居中

测试代码如下:(能够水平居中,通过text-align:center实现)


<style>
.box{ width:800px;height:600px;border:2px solid #000; text-align:center;}
span{ display:inline-block; height:100%; vertical-align:middle;}
img{ vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
<img src="bigptr.jpg" /><span></span>
</div>



在img标签后边添加一个span标签,设置其显示方式为inline-block,高度为100%,vertical-align属性为middle;然后再给img标签页加上该vertical-align属性即可

转载原文:https://blog.csdn.net/skullsky/article/details/61915770 

猜你喜欢

转载自www.cnblogs.com/dayin1/p/10905155.html