css,table如何平均行高?

html-css09

css,table如何平均行高?,第1张

1、打开Excel,可以看见行高不齐。

2、点击选中需要修改行高的所有表格区域。

3、在格式里,点击行高选项。

4、点击行高后会弹出如图所示的对话框。

5、接下来修改行高值为20(根据自己的需要修改),点击确定。

6、即可看到该表格的行高已被修改成统一行高20。

方法一:内嵌样式(为了方便查看效果我给这个段落加了个红色的边框)

方法二:内链样式(为了方便查看效果我给这个段落加了个蓝色的边框)

方法三:外链样式,同方法二,只不过将样式新建一个文件引入即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>无标题文档</title>

<style>

.duangao{

height:100px border:1px solid #00f

}

</style>

</head>

<body>

方法一内嵌样式(为了方便查看效果我给这个段落加了个红色的边框):

<p style="height:100px border:1px solid #f00">这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.</p>

方法二内链样式(为了方便查看效果我给这个段落加了个红色的边框):

<p class="duangao">这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.这是一段文字,这是一段文字,测试文字的高度.</p>

方法三外链样式,同方法二,只不过将样式新建一个文件引入即可

</body>

</html>

最终效果图如下:

如果想使单行文字垂直居中,即文字不多,将行高和段落设为一样的数值即可。如:height:100pxline-height:100pox

首先行高百分比的书写,百分比是针对字体大小进行设置的,也就是说如果你的文字大小为20px,那么100%就是20px,这个和你的需求不符合

其次,CSS当中也不能写成height/2的样子

那么,两种方案能够解决这个问题

1 改变标签的默认显示样式,然后使用vertical-align属性进行控制

<style>

.box {

width: 800px

height: 400px

border: 10px solid red

}

.demo {

float: left

display: table

width: 33%

height: 50%

border: 1px solid black

}

.demo > p {

display: table-cell

vertical-align: middle

}

</style>

<div class="box">

<div class="demo">

<p>新手书籍推荐:《HTML5布局之路》</p>

</div>

</div>

显示效果:

2 使用JS进行动态的样式设置(即通过JS动态的获取这个标签的高度,然后再通过 元素.style.lineHeight的方法来设置具体的行高值,当然,这种设置比第一种要麻烦的多)