最近总是碰到让图片上下居中的问题,左右居中直接设置
-
margin: 0 auto;就哦了,上下居中查了很多方法都行不通,多次试验最终有成功的两种方法总结下:
一种js实现,一种css实现:
一、js让图片上下居中:
1.首先要知道你要显示图片的高度范围:div_height。
2.由于获取图片高度前提是图片加载完毕,所以js函数调用不能用$(document).ready(),需要用$(window).load(function{……}),原因是前者加载完页面框架就会调用,而后者需要等所有页面元素包括图片加载完才调用。
3.获取图片高度img_height。
4.设置图片的 margin-top = ( div_height - img_height ) / 2。
示例:高度范围:220px
html:
<div class="box">
<div class="photo_box">
<img src="..//photo/~Y[ZW)$@O]`[email protected]" data-toggle="modal" data-target="#myModal"/>
</div>
</div>
js:
$(window).load(function(){
var img_height = $(this).height();
var margin_top = (220 - img_height) / 2;
$(this).css({"margin-top": margin_top + "px"});
});
二、html+css设置图片高度居中(假设包含图片的div高度为div_height = 600px,图片高度小于600px)
1.给图片的父div(本文假设为600px)设置
2.注意该父div的高度必须等于图片相对剧中显示的高度。
示例:
html:
<div class="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="item">
<img src="1.png">
</div>
</div>
</div>
css:
.carousel {
height: 600px;
line-height: 600px;
display: table-cell;
vertical-align: middle;
}
-