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

推广网 2017-05-09 04:44:46
http://www.vanjoinmcm.com/p/136.html

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

...全文
525 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
推广网 2017-05-10
  • 打赏
  • 举报
回复
Msxindl_Com 2017-05-10
  • 打赏
  • 举报
回复

<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>
推广网 2017-05-10
  • 打赏
  • 举报
回复
不知道,怎么用
紫岩_2013 2017-05-10
  • 打赏
  • 举报
回复
首先解释 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>
推广网 2017-05-09
  • 打赏
  • 举报
回复
用padding其他的不居中
看着是个昵称 2017-05-09
  • 打赏
  • 举报
回复
设置上下左右的padding值

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧