如何让table在body下垂直居中

HTML表格布局教程
最新推荐文章于 2022-04-21 13:29:38 发布
转载 最新推荐文章于 2022-04-21 13:29:38 发布 · 1.3k 阅读 · 0
文章标签：

#html web

本文将介绍如何使用HTML和CSS创建响应式表格布局，包括基本表格结构、样式设置和跨浏览器兼容性测试。

经测试多浏览器下实用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title>test</title>
 <meta http-equiv=Content-Type content="text/html; charset=utf-8">
 <meta content="MSHTML 6.00.6000.16825" name=GENERATOR>
</head>
<body>
    <table height="100%" width="100%" border="0">
        <tbody>
            <tr>
                <td align="center" valign="middle">
                    <table cellspacing="0" cellpadding="0" width="270" align="center" border="0">
                        <tbody>
                            <tr>
                                <td>
                                    213
                                </td>
                                <td>
                                    12
                                </td>
                                <td>
                                    12
                                </td>
                            </tr>
                            <tr>
                                <td>123
                                </td>
                                <td>
                                    321
                                </td>
                                <td>
                                    12
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

最关键的应该是：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

table-cell垂直居中外边距失效
nidayeya的博客
05-28 1575
css display:table-cell; vertical-align:middle;垂直居中 外边距失效 第一次写刚接触前端的小白 做练习时用到了此垂直居中方式，当给元素加外边距时出现问题： html: <body> <div class="test"> <p>此处内容为医生团队简述。北京科尔口腔门诊部共有专业牙科医生 0000名.........
让table在body下水平、垂直居中
weixin_30734435的博客
08-04 272
<table width="100%" border="0" style="height: 100%"> <tr> <td align="center" valign="middle"> <table id="__01" width="994" height="572" border="0" cellpadding="0" cellsp...
全面掌握主流CSS布局（水平居中+垂直居中+居中布局）
NolanKy 的 技术博客
10-22 1130
一，水平居中布局 1、行内元素水平居中 父级元素设置text-align: center ——>实现在块级元素内部的行内元素（inline/inline-block/inline-flex/inline-table）水平居中 <div class="parent"> <div class="child">dome</div> </div> <style> .parent{ text-align: center
（4种）实现垂直居中的方法总结
周周池的博客
04-18 4069
如果父元素的height不写，只需要设置父元素padding:10px 0;就可以将子元素垂直居中； 如果父元素的height写死了，就比较难垂直居中，以下是垂直居中的几种方法。 使用table自带的功能实现垂直居中。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> &l
表单元素和文字垂直居中对齐问题解决整理
12-13
为了解决这些问题，一种常见的建议是使用表格（`<table>`）来布局表单，因为表格元素天然支持单元格内的内容垂直居中。然而，这种方法虽然有效，但可能不被所有开发者推崇，因为它可能导致代码结构复杂且不利于响应...
解决table td中的checkbox无法上下居中的问题
09-25
例如，在Firefox中，你可能需要额外的样式配置来确保复选框垂直居中。在IE6这样的旧版浏览器中，可能需要使用`!important`来覆盖浏览器的默认样式。 4. 最后，代码中还提到`*.format：适用于ff的配置!important; ...
css实现文字图片垂直居中效果
09-25
在CSS中，实现文字与图片的垂直居中效果是一种常见的页面布局需求，尤其是在创建网页内容时，通常需要对元素进行精确的定位。在提供的示例代码中，展现了多种方法来实现垂直居中，下面将详细解释这些技术的细节。 ...
用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的方法
09-25
在标题和描述中提到的方法，就是通过设置CSS的`vertical-align`属性来实现这些元素的垂直居中。 `vertical-align`属性是CSS中用于控制内联元素（inline-level elements）或表格单元格（table-cell elements）中内容...
html如何使body的内容居中显示,css里面怎么让body内容居中
weixin_42511270的博客
06-09 1万+
css里面让body内容居中的方法：1、使用margin设置边距“0 auto”让HTML页面中所有的元素水平居中；2、将div距离页面窗口左边框和上边框的距离设置为“50%”；3、通过jQuery实现水平和垂直居中。本教程操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑。我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中...
HTML·设置body中内容居中
滴_的专栏
09-15 4万+
String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> "> 扫描结果
CSS-居中方法总结
qq_43681073的博客
04-21 901
常见CSS居中方法1. 水平居中1.1 文本级居中1.2 块级居中2. 垂直居中2.1 文本级居中2.2 块级居中 1. 水平居中 1.1 文本级居中 文本、或具有inline特性的元素，想要使其居中，则设置文本所在容器、或具有inline特性元素的父元素设置如下属性： 元素 { text-align: center; } 实例： div{ width: 100px; height: 100px; border: 5px solid black; text-align: center; } &l
CSS样式表进行table水平居中、垂直居中、自动填充
qq_39061832的博客
07-24 3万+
最近，在用CSS+DIV做一个静态网页，做完了才发现所有的页面在不同的机器上显示很是有问题，没有进行水平居中和垂直居中，并且宽屏下，两边留白太难看。可是要是修改所有的html页面，可是有700多个~~，还好当时做html页面时设计的样式表还不错，让我感觉到了样式表的方便和强大。 注：还得同时考虑Linux Firefox下的显示情况，因为我们是做Linux的公司啊，出去演示肯定用自己的lLi
Html页面body里的元素居中方法
LiuZnHi的专栏
05-25 1万+
在写H5页面时，经常遇到把body里的元素居中的要求，每次都需要现查，现在整理出来。如下： body { max-width:660px; margin: 0 auto; } ps:max-width参数，根据自己的实际需要调整大小。 ...
html盒子在body居中,使用CSS实现盒子水平垂直居中的方法(8种)
weixin_33122947的博客
06-10 1506
原始代码：center.html：Centercenter.css：body {background-color: #6ed0ff;}.father {background-color: #be33ec;border-radius: 20px;box-shadow: 0 0 15px rgb(0, 0, 0);margin: 100px auto;width: 300px;height: 300p...
html中表格table的内容水平和垂直居中显示
热门推荐
xujing19920814的博客
03-27 14万+
html中表格table的内容居中显示 在CSS样式文件中指定#class td /*设置表格文字左右和上下居中对齐*/ { vertical-align: middle; text-align: center; } /*class 是所属的类*/ <div id="class" align="center" style= "margin: 0cm 0cm 0pt; te
让 span在div里垂直居中
最新发布
10-30
让 span 元素在 div 元素内垂直居中，有以下几种方法： ### 使用 line-height 属性 若 div 有固定高度，且 span 仅包含单行文本，可将 div 的 `line-height` 属性值设为与 div 高度相等。假设 div 高度为 50px，示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div { height: 50px; line-height: 50px; } </style> </head> <body> <div> <span>要垂直居中的文本</span> </div> </body> </html> ``` 此方法简单，但仅适用于单行文本的垂直居中 [^1]。 ### 使用 display: table 和 display: table-cell 属性 通过将外层 div 的 `display` 属性设为 `table`，内层 span 的 `display` 属性设为 `table-cell`，并使用 `vertical-align: middle` 实现垂直居中。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div { width: 200px; height: 200px; background: red; text-align: center; display: table; } span { display: table-cell; vertical-align: middle; } </style> </head> <body> <div> <span>aaa</span> </div> </body> </html> ``` 该方法兼容性好，可处理多行文本 [^2]。 ### 使用 Flexbox 借助 Flexbox 布局，将 div 的 `display` 属性设为 `flex` 或 `inline-flex`，并使用 `align-items: center` 实现垂直居中。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div { display: flex; align-items: center; width: 200px; height: 200px; background-color: lightblue; } </style> </head> <body> <div> <span>要垂直居中的文本</span> </div> </body> </html> ``` Flexbox 是现代且灵活的布局方式，易于实现各种对齐需求 [^3]。 ### 使用绝对定位和 transform 通过绝对定位和 `transform` 属性，将 span 元素相对于 div 垂直居中。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div { position: relative; width: 200px; height: 200px; background-color: lightgreen; } span { position: absolute; top: 50%; transform: translateY(-50%); } </style> </head> <body> <div> <span>要垂直居中的文本</span> </div> </body> </html> ``` 此方法适用于需要精确控制元素位置的场景 [^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值