HTML与CSS--------居中问题

最新推荐文章于 2022-08-11 18:59:16 发布

原创最新推荐文章于 2022-08-11 18:59:16 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

HTML与CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了网页设计中常见的元素居中方法，包括水平居中、垂直居中等实用技巧，并通过示例展示了如何使用CSS实现这些效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

居中问题

左右居中

 块标签内的内容居中用 text-align:center

 块标签自己居中两种方法
    1.当块标签给定宽度时 用margin: 0 auto;

    2.或者用相对定位:left:50%  margin-left:width/2;

行块标签上下居中
1.表格有默认内容居中的样式
2.用vertical-align:middle;

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .wrap{
                height: 500px;
                background-color: lightpink;
            }
            .wrap span{
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
            .wrap img{
                width: 200px;
                height: 100px;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <span></span>
            <img src="img/tfboys1.jpg"/>
        </div>
    </body>
</html>