day06.06. HTML页面布局-使用div示例

追梦女孩ii

已于 2024-07-18 20:53:36 修改

阅读量244

点赞数 4

分类专栏： HTML 一阶段day06 一阶段文章标签： html 前端 css 数据分析 python css3

于 2024-06-19 16:30:00 首次发布

本文链接：https://blog.csdn.net/m0_61566562/article/details/139782713

版权

一阶段同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

HTML

23 篇文章 0 订阅

订阅专栏

一阶段day06

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--
            text-align:center  文字水平居中
            line-height：200px;  文字垂直居中,行高设置跟高度一样，文字就会在当前div中水平居中
            margin:0 auto  在页面水平居中
      -->

    <div style="width:500px; height: 200px;
                text-align: center; line-height:200px;
                background: orange; margin: 0 auto ">页面顶部</div>

    <div style="width:500px; height: 1000px;
                text-align:center;line-height:1000px;
                background:pink;margin:0 auto">页面中间</div>

    <div style="width:500px; height: 200px;
                text-align:center;line-height:200px;
                background:orange;margin:0 auto">页面底部</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--
            text-align:center  文字水平居中
            line-height：200px;  文字垂直居中,行高设置跟高度一样，文字就会在当前div中水平居中
            margin:0 auto  在页面水平居中
      -->

    <div style="width:500px; height: 200px;
                text-align: center; line-height:200px;
                background: orange; margin: 0 auto ">页面顶部</div>

    <div style="width:500px; height: 1000px;
                text-align:center;line-height:1000px;
                background:pink;margin:0 auto">页面中间</div>

    <div style="width:500px; height: 200px;
                text-align:center;line-height:200px;
                background:orange;margin:0 auto">页面底部</div>
</body>
</html>

追梦女孩ii

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
day06.06. HTML页面布局-使用div示例

文字垂直居中,行高设置跟高度一样，文字就会在当前div中水平居中。margin: 0 auto ">页面顶部background:orange;margin:0 auto">页面底部background:pink;margin:0 auto">页面中间text-align:center 文字水平居中。margin:0 auto 在页面水平居中。
复制链接

扫一扫

专栏目录