margin:0 auto;居中和text"/>
margin:0 auto;居中和text
text-align:center设置为文本或img标签等一些内联对象(或与之类似的元素)的居中。
margin:0 auto是设置块元素(或与之类似的元素)的居中。
像表格元素的文字居中用text-align:center,表格整体居中用margin:0 auto,
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>magin和text-align居中的区别</title><style>.text{width: 600px;height: 400px;text-align: center;/*文本居中 */margin: 0 auto;/* 表格居中 */}</style>
</head>
<body><table border="1" class="text"><caption ><strong>宠物信息表</strong></caption><thead><tr><th>年纪</th><th>宠物名</th><th>所属宠物公司</th><th>公母</th></tr></thead><tbody><tr><td rowspan="4">四岁</td><td>cat</td><td>CAT</td><td rowspan="2">公</td></tr><tr><td>dog</td><td>DOG</td></tr><tr><td>pig</td><td>PIG</td><td rowspan="2">母</td></tr><tr><td>parrot</td><td>BIRD</td></tr></tbody><tfoot><tr><td>评语</td><td colspan="3">健康,无疾病</td></tr></tfoot></table>
</body>
</html>
页面显示:
值得一提的是margin属性;贴两个链接是介绍margin的:
CSS margin 属性
深入理解css中的margin属性 - Wayne-Zhu - 博客园
更多推荐
margin:0 auto;居中和text
发布评论