大DIV中的2个小DIV怎样同时垂直居中

WormJan 2014-11-20 01:37:13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<style>

		.outer{width:500px; height:300px; border:1px solid #f00; display:table-cell; vertical-align:middle;}

		.in1{border:1px solid green; width:100px; height:50px; float:left;}

		.in2{border:1px solid blue; width:100px; height:250px; float:right;}

	</style>

</head>

<body>

	<div class="outer">

		<div class="in1">

		

		</div>

		<div class="in2">

		

		</div>

	</div>

</body>

</html>

代码如上，一个大DIV，里面 2个小DIV，这2个小DIV高度不定（我代码里写了高度是为了测试方便，比如我可能在DIV里放上图片）。2个小DIV一个往左漂，一个往右漂。要求2个都可以垂直居中，并且其高度有所变化时也可以垂直居中。

非常感谢

...全文

4237 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

jiangbai333 2014-11-27

打赏
举报

你的目的不就是做悬浮在两侧的广告么!


<div class='left' style="height:100%;width:50px;position:fixed;top:0;left:0;"></div>
<div class=''right style="height:100%;width:50px;position:fixed;top:0;right:0;"></div>

然后有两种方法让里面的图片垂直居中！ 1.你手动调，改变div的上内边距 2,,页面加载完后，利用js，获取div高度(H)和图片高度(h)，把div上内边距设置成(H-h)/2

Go 旅城通票 2014-11-27

打赏
举报

父节点relative定位，子节点absolute定位+margin调整位置，这样不需要关注父节点的高度要不需要依据父节点高度和子节点高度来调节margin-top居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        .outer{width:500px; height:300px; border:1px solid #f00;position:relative}
        .in1{border:1px solid green; width:100px; height:50px; position:absolute; left:0px;top:50%;margin-top:-50px}
        .in2{border:1px solid blue; width:100px; height:250px; position:absolute;right:0px;top:50%;margin-top:-125px}
    </style>
</head>
<body>
    <div class="outer">
        <div class="in1">
         
        </div>
        <div class="in2">
         
        </div>
    </div>
<script>
setTimeout(function () {document.getElementsByTagName('div')[0].style.height='500px' }, 3000);//3s设置容器高度500px
</script>
</body>
</html>

daswcszxw 2014-11-27

打赏
举报


	<style>
		.outer{width:500px; height:300px; border:1px solid #f00; position:relative;}
		.in1{border:1px solid green;width:100px; height:50px; position:absolute;left:0;top:50%;margin-top:-25px}
		.in2{border:1px solid blue;width:100px; height:250px; position:absolute;right:0;top:50%;margin-top:-125px}
	</style>

这个不能解决?!

滴滴月空雨 2014-11-26

打赏
举报

http://www.blueidea.com/tech/web/2009/6470.asp 只能是这样了吧！！！

KK3K2005 2014-11-21

打赏
举报

如果知道高度可以用 margion-top负偏移来解决不知道高度我觉得直接使用 table 里面放div 就解决了问题

WormJan 2014-11-20

打赏
举报

浮动必须得有。因为布局就是这么要求的。感谢u013472677

qcxl 2014-11-20

打赏
举报

左右浮动时，两个div高度是一致的，很难实现两个同时垂直居中去掉左右浮动，加上table实现起来较简单


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style>
		.outer{width:500px; height:300px; border:1px solid #f00; display:table-cell; vertical-align:middle;}
		.in1{border:1px solid green; width:100px; height:50px; }
		.in2{border:1px solid blue; width:100px; height:100px; }
	</style>
</head>
<body>
	<div class="outer">
		<table>
			<tr>
				<td><div class="in1"></div></td>
				<td><div class="in2"></div></td>
			</tr>
		</table>
	</div>
</body>
</html>

再想想其它方式