在css中如何定义一个表格按照浏览器的大小自动调整上下居中?

在css中如何定义一个表格按照浏览器的大小自动调整上下居中?,第1张

上下居中本身CSS没有这个属性 你可以用JS来动态调整TOP
还有一种方法就是 你在外面用一个表格套上 在在TD里面放一个表格 把TD的属性设置为上下居中 (好像默认就是) 这样就上下居中了
上面这个方法有点鸡肋 你选择下吧
恩 还有一种但是他不支持IE8以下的浏览器
就是把DIV的DISPLAY属性设置为TD的 这样就可以像调整TD一样来调整DIV了

表格文字上下居中设置方法:

工具/原料:联想Y7000P、Windows10、WPS Office 1110

1、选中表格内容

将word表格打开之后,鼠标选中需要上下居中的表格。

2、点击小三角符号

选中表格内容之后,在开始菜单找到段落设置功能区并点击小三角图标。

3、下拉对齐方式窗口

把段落设置窗口打开之后,找到常规下方的对齐方式,点击下拉图标。

4、选中居中对齐并确定

在展开的对齐方式中选择居中对齐,点击d窗下方的确定即可。

表格中的文字上下居中的方法如下:

工具/原料:联想Y7000P、Windows10、WPS Office 1110

1、选中表格内容

将word表格打开之后,鼠块倘标选中需要上下居中的表格。

2、点击小三角符号

选中表格内容之后,在开始菜单找到段落设置功能区并点击小三角图标。

3、下拉对齐方式窗口

把段落设置窗口打开之后,找到常规下拒秤方的对齐方边光醒式,点击下拉图标。

4、选中居中对齐并确定

在展开的对齐方式中选择居中对齐,点击d窗下方的确定即可。

在表格外面嵌套另一个高度为 100% 的表格,外层的表格设置 td 的 valign 属性 为 middle
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="middle">
<table><tr><td>sdfsdfsf</td></tr></table>
</td></tr></table>

代码如下:

<html> 
<body> 
<table border="1"> 
<tr> 
<td align="center" style="width:120px; height: 21px;" valign="middle"> 
表格剧中
</td> 
<td align="center" style="width:120px; height: 21px;" valign="middle"> 
表格剧中
</td> 
<td align="center" style="width:120px; height: 21px;" valign="middle"> 
表格剧中
</td> 
</tr> 
</table> 
</body> 
</html>

说明:

align="center"

设置行高等于你div的高度 <div style="height:30px; line-height:30px;">sdfsdf</div>
或者 内容向上偏移 <div style="height:30px; padding-top:10px;">sdfsdf</div>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12827359.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-28
下一篇 2023-05-28

发表评论

登录后才能评论

评论列表(0条)

保存