如果高度自适应用JQUERY怎样获取,让DIV垂直居中呢?

reforystyle 2015-09-03 09:31:08
<div class="main">
<div class="main-box">
<div class="main-a">
<div class="child">联系电话:12356</div>
<div class="child-a">我是文字介绍</div>
</div>
</div>
</div>

main的高度和宽度是 300x300,main-box的高度和main一样是个黑色的遮罩,child和child-a是里面的内容,main-a 里的两个DIV child和child-a因为是文字内容,高度是自适应。如何让 main-a 垂直居中呢?求解,先谢谢啦!~
...全文
128 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
jxzoufeng 2015-09-05
  • 打赏
  • 举报
回复
可以用table-cell 布局或者使用 inline-block 加line-height熟悉配合
天际的海浪 2015-09-03
  • 打赏
  • 举报
回复

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title> 页面名称 </title>
<style type="text/css">
	.main {
		width: 300px;
		height: 300px;
		background: #009900;
	}
	.main-box {
		width: 300px;
		height: 300px;
		position: relative;
	}
	.main-a {
		background: #CC6600;
		position: absolute;
	}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="main">
<div class="main-box">
   <div class="main-a">
      <div class="child">联系电话:12356</div>
      <div class="child-a">我是文字介绍</div>
   </div>
</div>
</div>
<script type="text/javascript">
$(function(){
	$(".main-a").css("top",($(".main-box").height()-$(".main-a").outerHeight())/2);
});
</script>
</body>
</html>

87,993

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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