margin:0 auto；居中和text-align:center；居中的区别

最新推荐文章于 2022-07-07 11:20:11 发布

dcycl

最新推荐文章于 2022-07-07 11:20:11 发布

阅读量923

点赞数 3

文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_48092546/article/details/122424534

版权

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 - 博客园

dcycl

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
margin:0 auto；居中和text-align:center；居中的区别

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
复制链接

扫一扫