css表格怎么设置中间对齐
时间:2021-04-22
来源:互联网
今天PHP爱好者给大家带来在css中,可以通过给表格table元素设置“margin:auto;”样式来让表格中间对齐。该样式给一个元素的左外边距和右外边距赋予同样的auto值,那么这个元素的左、右外边距就会平分所占据的可用空间,因此我们会看到在元素表现水平居中。希望对大家有所帮助。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css表格设置中间对齐
在css中,可以为表格table标签设置margin:auto;样式使表格居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格居中</title>
<style>
div{
width: 200px;
padding: 10px;
border: 1px solid peru;
}
table,td,tr {
border: 1px solid red;
margin: auto;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
</table>
</div>
</body>
</html>
效果图:
margin:auto;
的工作原理
它给一个元素的左外边距和右外边距赋予同样的auto值,那么这个元素的左、右外边距就会平分所占据的可用空间(父元素宽度的1/2),因此我们会看到在元素表现水平居中。
以上就是css表格怎么设置中间对齐的详细内容,更多请关注php爱好者其它相关文章!
-
PHP serialized()函数详解 时间:2025-08-30
-
PHP sort()函数详解 时间:2025-08-30
-
PHP filesize()函数详解 时间:2025-08-30
-
Java HashMap entrySet()方法的定义和作用 时间:2025-08-30
-
简述Hibernate和Mybatis的差异及各自的优缺点 时间:2025-08-30
-
Hibernate框架详解(意义和作用、主要功能、用法) 时间:2025-08-30
今日更新
-
1. 平面设计是什么 初学者必知的入门指南与职业前景 2. 平面设计是什么 如何快速掌握核心技能与行业应用 3. 平面设计是什么 揭秘设计原理与实战技巧大全 4. 平面设计是什么 从零基础到高手的完整学习路径 5. 平面设计是什么 解析行业趋势与就业方向全攻略
阅读:18
-
专业平面设计图制作指南:从入门到精通的完整方案
阅读:18
-
平面设计涵盖哪些内容 全面解析设计领域核心要素与技能要求
阅读:18
-
平面设计具体做什么工作 详解平面设计师的职责与技能要求
阅读:18
-
如何在电脑和手机上快速输入平方符号?完整教程分享
阅读:18
-
揭秘平均脸真相:你的长相到底有多接近标准美?
阅读:18
-
完美世界的梗是什么梗 揭秘游戏圈最火热梗背后的爆笑真相
阅读:18
-
光夜齐司礼生日限时周边上新-往期生日周边复刻开启
阅读:18
-
平板电脑和笔记本电脑哪个好?6大核心区别帮你精准选择
阅读:18
-
如何快速输入平方符号?完整教程及快捷键大全
阅读:18