如果高度自适应用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 垂直居中呢？求解，先谢谢啦！~

...全文

114 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>