请问我这个图片怎样垂直居中，为什么用vertical-align:middle;不行

[推广网]

http://www.vanjoinmcm.com/p/136.html

图片怎样在框子里面居中？

[看着是个昵称]

设置上下左右的padding值

[推广网]

用padding其他的不居中

[紫岩_2013]

首先解释 vertical-align:middle; 为什么不起作用，因为你的 div.jqzoom 没有文本，而且还要写line-height:326px; 一般来说，图片垂直居中很难用几句css来解决，通常都是用js解决，但是就会遇到图片加载完成之前抓不到图片的高的问题；楼上仁兄的方法可以一试！另外我这还有一个投机取巧的方法：<div class="jqzoom" id="spec-n1">大<img src="xxx.jpg" jqimg="xxx.jpg" width="350" alt="" data-bd-imgshare-binded="1"></div> 也就是说，在div.jqzoom内部加一个任意中文文字，文字和<img>标签之前不能有空格和缩进，然后给div.jqzoom添加样式{ line-height:326px;font-size:16px;text-indext:-1em;}然后利用overflow:hidden; 把缩进的文字隐藏掉；但是由于背景图片的关系可能需要改一下结构了；自己做了个小例子，大概是这样；如果楼主测试兼容性没问题的话不妨可以采用试试~

<style>
*{ margin:0; padding:0;}
#preview{ width:400px; height:298px; padding:14px; background:url(http://www.vanjoinmcm.com/images/fsdfa_03.gif) no-repeat; margin:100px auto;}
.jqzoom{ width:400px; height:298px; line-height:298px; font-size:16px; text-indent:-1em; overflow:hidden;}
.jqzoom img{ width:400px; max-height:298px; vertical-align:middle;}
</style>
<div id="preview">
	<div class="jqzoom">大<img src="http://www.vanjoinmcm.com/d/file/chanpinzhanshi/rouxingpikaizhuan1/hanyuntangfeng%E2%80%94huoshanmian/2017-05-05/ff2b6fb822edbf8b8a90ca425946a348.jpg">
	</div>
</div>

[推广网]

不知道，怎么用

[Msxindl_Com]

<script type="text/javascript">
function imgCenter(){   //新增部分
	var H = $("#spec-n1 img").height();
	var W = $("#spec-n1 img").width();
	$("#spec-n1 img").css({
		"position":"absolute",
		"top":"50%",
		"left":"50%",
		"margin-left":"-"+W/2+"px",
		"margin-top":"-"+H/2+"px"
	});
}
$(function(){
	imgCenter();  //新增部分
	$(".jqzoom").jqueryzoom({
		xzoom:400,
	//此处代码省略.........
	//此处代码省略.........
       $("#spec-n1 img").eq(0).attr({
				src:src.replace("/n5/","/n1/"),
				jqimg:src.replace("/n5/","/n0/")
	});
	imgCenter();   //新增部分
	$(this).css({
		"border":"2px solid #ff6600",
	//此处代码省略.........
	//此处代码省略.........
</script>

[推广网]