要命的问题？？？？CSS中如何让label的width 和height自动等于外面div的宽高

konamiking 2013-05-01 10:23:50

我遇到的问题是：
DOM结构大致如下：
<div>
<label>test</label>
</div>
div的高度只有在运行时才能动态计算出。
如何让label的width和height自动等于外面的div的width和height，并且label中的文字垂直居中。

由于height不是定值，所以在写程序的时候是无法获取一个确定的值的。

我的label用来显示单行文本，所以想让line-height自动等于height来使label中的文字垂直居中。
我的整体布局决定了我不能使用tabel-cell和vertical-align:middle方式。所以提议这种方案的朋友就不要回复了。

...全文

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

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

UEAnswer 2013-06-26

打赏
举报

<div class="a"> <label class="b"> 文字 </label> </div> 既然label要和div大小一样，那么label会覆盖div，那么要2个样式干嘛呢？而且根本没有必要加label标签了，直接如下： <div class="a"> 文字 </div> 要简单。

当然感 2013-06-26

打赏
举报

设置label为block, 既然你div的高度是动态添加的，那label的高度也一样可以动态添加，line-height也可以动态添加等于div的高度。。。。。。。。。。。。label.style.lineHeight=div.height+'px';

云-中-飞 2013-05-03

打赏
举报

百分比控制<lable>的高度和宽度

鲁康 2013-05-02

打赏
举报

引用 1 楼 functionsub 的回复:

div设置line-height就是了。。

把<label>弄成块级元素,然后就可以修改高度和宽度了,然后加上line-height就居中了！代码如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.a,.b{
	width:500px;
	height:500px;
	}
	.b{
		display:block;
		text-align:center;
		line-height:500px;
		border:1px solid #999;
		}
</style>
</head>

<body>
<div class="a">
<label class="b">
文字
</label>
</div>
</body>
</html>