day04_图文-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44627935/article/details/124210350

本文介绍了HTML5中实现元素居中对齐的几种方法，包括使用line-height实现文本垂直居中，通过text-align:center让内容在父元素中水平居中，以及利用margin: 0 auto实现块级元素的水平居中。文中还提供了多个实践示例，如test01至test04，以及demo01到demo05，帮助读者更好地理解和应用这些技巧。

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

居中：
1、line-height = height 文本垂直居中
2、text-align:center 写在父级
3、margin：0 auto 写在块元素，相对于父级水平居中

今日小练：

test01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .item{
            width: 100px;
            height: 120px;
            float: left;
            /* background-color: yellow; */
            text-align: center;
            overflow: hidden;
        }
        .item img{
            height: 50px;
            line-height: 50px;
            /* background-color: pink; */
            margin-top: 18px;
            display: block;
            margin: 5px auto;
            margin-top: 18px;
        }
        .item .title{
            font-size: 20px;
            text-align: center;
            font-weight: 300;
            /* background-color: cyan; */
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="img/test01/1.png" alt="">
        <p class="title">话费</p>
    </div>
    <div class="item">
        <img src="img/test01/2.png" alt="">
        <p class="title">机票</p>
    </div>
    <div class="item">
        <img src="img/test01/3.png" alt="">
        <p class="title">酒店</p>
    </div>
</body>
</html>

<!-- 居中：
1、line-height = height 文本垂直居中

2、test-align:center 写在父级
子级中的行元素，行块元素，文本内容水平居中

3、margin：0 autu写在块元素，相对于父级水平居中 -->

实现：
请添加图片描述
test02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test02</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .item{
            width: 300px;
            height: 128px;
            border-bottom: 1px solid #e8e8e8;
        }
        .item img{
            width: 72px;
            height: 72px;
            margin-top: 28px;
            margin-left: 18px;
            float: left;
        }
        .item p{
            height: 128px;
            line-height: 128px;
            font-size: 24px;
            float: left;
            text-align: center;
            margin-left: 32px;
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="img/test02/1.jpg" alt="">
        <p>K50 Pro</p>
    </div>
    <div class="item">
        <img src="img/test02/2.jpg" alt="">
        <p>智能生活</p>
    </div>
    <div class="item">
        <img src="img/test02/3.jpg" alt="">
        <p>智能新品</p>
    </div>
</body>
</html>

实现：
请添加图片描述
test03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test03</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .item{
            width: 476px;
            height: 146px;
            /* overflow: hidden; */
            /* background-color: yellow; */
        }
        .item img{
            width: 118px;
            height: 118px;
            margin-top: 14px;
            margin-left: 30px;
            /* background-color: cyan; */
            float: left;
        }
        .item .p1{
            font-size: 20px;
            /* background-color: pink; */
            margin-left: 164px;
            margin-top: 16px;
        }
        .item .p2{
            font-size: 26px;
            margin-left: 162px;
            margin-top: 24px;
            color: red;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="img/test03/1.webp" alt="">
        <p class="p1">Apple 苹果iPhone 13(A2634)全网通5G手机 128GB</p>
        <p class="p2"><span style="font-size: 20px;">￥</span>6089.00</p>
    </div>
    <div class="item">
        <img src="img/test03/2.webp" alt="">
        <p class="p1">Apple苹果iPhone 13全网通5G手机星光色256G</p>
        <p class="p2"><span style="font-size: 20px;">￥</span>6288.00</p>
    </div>
    <div class="item">
        <img src="img/test03/3.webp" alt="">
        <p class="p1">苹果13 Apple iPhone 13(A2634)二手5G手机国行双</p>
        <p class="p2"><span style="font-size: 20px;">￥</span>6249.00</p>
    </div>
</body>
</html>

实现：
请添加图片描述
test04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test04</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .item{
            width: 380px;
            height: 540px;
            float: left;
        }
        .item img{
            width: 240px;
            height: 240px;
            margin-top: 58px;
            margin-left: 60px;
        }
        .item .p1{
            font-size: 21px;
            width: 330px;
            margin-top: 70px;
            margin-left: 25px;
        }
        .item .p2{
            font-size: 26px;
            margin-top: 36px;
            margin-left: 25px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="img/test04/1.webp" alt="">
        <p class="p1">苹果13 Apple iPhone 13(A2634)二手5G手机国行双卡双…</p>
        <p class="p2"><span style="font-size: 20px;">￥</span>6249.00</p>
    </div>
    <div class="item">
        <img src="img/test04/2.webp" alt="">
        <p class="p1">联想笔记本电脑扬天V15学生网课高清屏轻薄本15.6寸英特尔…</p>
        <p class="p2"><span style="font-size: 20px;">￥</span>2599.00</p>
    </div>
    <div class="item">
        <img src="img/test04/3.webp" alt="">
        <p class="p1">路易苏午休毛毯午睡薄盖毯(现在疫情管控预计发货时间…</p>
        <p class="p2"><span style="font-size: 20px;">￥</span>10.06</p>
    </div>
</body>
</html>

实现：
请添加图片描述
demo01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo01</title>
    <style>
        *{
            width: 820px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .p{
            height: 38px;
            /* background-color: cyan; */
            overflow: hidden;
        }
        .p .p1{
            width: 125px;
            font-size: 18px;
            color: #006600;
            margin-left: 31px;
            margin-top: 12px;
            float: left;
            /* background-color: cyan; */
            border: 1px solid transparent;
        }
        .p .p2{
            height: 18px;
            font-size: 16px;
            color: #5a8bb4;
            margin-top: 13px;
            border: 1px solid transparent;
            /* background-color: yellow; */
        }
        .item{
            width: 164px;
            height: 280px;
            margin-top: 12px;
            /* background-color: yellow; */
            float: left;
        }
        .item img{
            width: 100px;
            height: 140px;
            margin-left: 32px;
        }
        .item .p3{
            width: 100px;
            font-size: 15px;
            margin-left: 32px;
            text-align: center;
            /* border: 1px solid pink; */
            color: #101010;
            margin-top: 16px;
        }
        .item .p4{
            width: 100px;
            font-size: 14px;
            margin-left: 32px;
            /* border: 3px solid pink; */
            text-align: center;
            color: #dbdbdb;
            margin-top: 16px;
        }
    </style>
</head>
<body>
    <div class="p">
        <p class="p1">热门专栏· · · · · ·</p>
        <p class="p2">（更多）</p>
    </div>
    <div class="item">
        <img src="img/demo01/1.jpg" alt="">
        <p class="p3">爆诞：世界科幻200年</p>
        <p class="p4">音频专栏</p>
    </div>
    <div class="item">
        <img src="img/demo01/2.jpg" alt="">
        <p class="p3">工作之苦--解决2020年代的工作新问题</p>
        <p class="p4">音频专栏</p>
    </div>
    <div class="item">
        <img src="img/demo01/3.jpg" alt="">
        <p class="p3">和思想家一起漫步--20世纪留给我们的10种远见</p>
        <p class="p4">音频专栏</p>
    </div>
    <div class="item">
        <img src="img/demo01/4.jpg" alt="">
        <p class="p3">用性别之尺丈量世界--18堂思想课解读女性问题</p>
        <p class="p4">音频专栏</p>
    </div>
    <div class="item">
        <img src="img/demo01/5.jpg" alt="">
        <p class="p3">穿越文学经典--复旦梁永安的爱情课</p>
        <p class="p4">音频专栏</p>
    </div>
    <div class="item">
        <img src="img/demo01/6.png" alt="">
        <p class="p3">拍张好照片--跟七七学生活摄影</p>
        <p class="p4">音频专栏</p>
    </div>
    <div class="item">
        <img src="img/demo01/7.png" alt="">
        <p class="p3">一切美好的事物都与你有关--21天走出低自尊</p>
        <p class="p4">音频专栏</p>
    </div>
    <div class="item">
        <img src="img/demo01/8.png" alt="">
        <p class="p3">哲学闪耀时--不一样的西方哲学史</p>
        <p class="p4">音频专栏</p>
    </div>
    <div class="item">
        <img src="img/demo01/9.jpg" alt="">
        <p class="p3">作家的诞生--12位殿堂级作家的写作课</p>
        <p class="p4">音频专栏</p>
    </div>
    <div class="item">
        <img src="img/demo01/10.jpg" alt="">
        <p class="p3">52倍人生--戴锦华大师电影课</p>
        <p class="p4">音频专栏</p>
    </div>
</body>
</html>

实现：
请添加图片描述
demo02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo02</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* .item{
            width: 322px;
            height: 650px;
            float: left;
        } */
        .item {
            width: 320px;
            height: 591px;
            background-image: url(img/demo02/1.jpg);
            background-size: 320px 440px;
            /* background-position: center; */
            background-repeat: no-repeat;
            margin: 0 auto;
            border: 1px solid #efefef;
            float: left;
            margin-left: 56px;
            /* overflow: hidden; */
            /* background-color: darkblue; */
        }
        .item .p1{
            font-size: 36px;
            border: 2px solid transparent;
            margin-top: 370px;
            margin-left: 20px;
            color: white;
            /* background-color: darkorange; */
        }
        .item .p2{
            font-size: 30px;
            color: #ffb52a;
            width: 280px;
            height: 70px;
            line-height: 70px;
            background-color: #fbfbfb;
            border: 1px solid transparent;
            margin-left: 20px;
            margin-top: 19px;
            /* overflow: hidden; */
        }
        .item .p3{
            width: 159px;
            height: 78px;
            line-height: 78px;
            border-right: 1px dotted #efefef;
            background-color: #ffffff;
            float: left;
            text-align: center;
            font-size: 30px;
            color: #999999;
        }
        .item .p4{
            width: 160px;
            height: 78px;
            line-height: 78px;
            text-align: center;
            margin-left: 161px;
            font-size: 30px;
            color: #999999;
        }
        .item .p5{
            height: 78px;
            line-height: 78px;
            text-align: center;
            margin-top: 22px;
            font-size: 32px;
            color: #999999;
        }
    </style>
</head>
<body>
    <div class="item">
        <p class="p1">猎枪</p>
        <p class="p2">1875人想看</p>
        <p class="p3">预告片</p>
        <p class="p4">预售</p>
        <p class="p5">1月20日上映</p>
    </div>
    <div style="background-image: url(img/demo02/2.jpg);" class="item">
        <p class="p1">芭比公主历险记</p>
        <p class="p2">1107人想看</p>
        <p class="p3">预告片</p>
        <p class="p4">预售</p>
        <p class="p5">1月21日上映</p>
    </div>
    <div style="background-image: url(img/demo02/3.png);" class="item">
        <p class="p1">反击者2</p>
        <p class="p2">605人想看</p>
        <p class="p3">预告片</p>
        <p class="p4">预售</p>
        <p class="p5">1月21日上映</p>
    </div>
    <div style="background-image: url(img/demo02/4.jpg);" class="item">
        <p class="p1">长津湖之水门桥</p>
        <p class="p2">686074人想看</p>
        <p class="p3">预告片</p>
        <p class="p4">预售</p>
        <p class="p5">2月1日上映</p>
    </div>
</body>
</html>

实现：
请添加图片描述
demo03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo03</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .item{
            width: 206px;
            height: 268px;
            background-color: #ffffff;
            float: left;
            margin-left: 20px;
        }
        .item img{
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: yellowgreen;
            margin-left: 79px;
            margin-top: 26px;
        }
        .item .p1{
            font-size: 20px;
            color: #000000;
            margin-top: 16px;
            text-align: center;
        }
        .item .p2{
            font-size: 16px;
            color: #767676;
            margin-top: 8px;
            text-align: center;
        }
        .item .p3{
            font-size: 16px;
            color: #767676;
            margin-top: 16px;
            text-align: center;
        }
        .item .p4{
            width: 88px;
            height: 30px;
            /* line-height: 30px; */
            margin-top: 14px;
            margin-left: 58px;
            font-size: 18px;
            color: #3fb27e;
            text-align: center;
            border: 1px solid #3fb27e;
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="img/demo03/1.jpg" alt="">
        <p class="p1">干货考研经验</p>
        <p class="p2">经验超市app为大家整理干货的考研经验，大家可...</p>
        <p class="p3">914人关注|83篇文章</p>
        <p class="p4">进入专栏</p>
    </div>
    <div class="item">
        <img src="img/demo03/2.jpg" alt="">
        <p class="p1">行走的审计汪</p>
        <p class="p2">让审计变得简单，有趣。</p>
        <p class="p3" style="margin-top: 36px;">4370人关注|216篇文章</p>
        <p class="p4">进入专栏</p>
    </div>
    <div class="item">
        <img src="img/demo03/3.jpg" alt="">
        <p class="p1">TD北美留学进化论</p>
        <p class="p2">TestDaily致力于最负责任的北美考试咨询和干货的分...</p>
        <p class="p3">4,212人关注|1686篇文章</p>
        <p class="p4">进入专栏</p>
    </div>
    <div class="item">
        <img src="img/demo03/4.jpg" alt="">
        <p class="p1">王喆的机器学习笔记</p>
        <p class="p2">关注推荐系统、计算广告等机器学习领域业界前沿</p>
        <p class="p3">21,915人关注|46篇文章</p>
        <p class="p4">进入专栏</p>
    </div>
</body>
</html>

实现：
请添加图片描述
demo04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo04</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .item{
            width: 252px;
            height: 324px;
            border-top: 16px solid #f5f5f5;
            border-left: 16px solid #f5f5f5;
            background-color: #ffffff;
            overflow: hidden;
            float: left;
        }
        .item img{
            margin-top: 12px;
            width: 200px;
            height: 200px;
            margin-left: 26px;
            /* background-color: cyan; */
        }
        .item .p1{
            font-size: 20px;
            color: #252525;
            text-align: center;
        }
        .item .p2{
            font-size: 16px;
            color: #c2c2c2;
            text-align: center;
        }
        .item .p3{
            font-size: 20px;
            color: #ff6d19;
            text-align: center;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="img/demo04/4.webp" alt="">
        <p class="p1">Xiaomi 12 Pro</p>
        <p class="p2">全新骁龙8 | 2K AMOLED</p>
        <p class="p3">4699元起</p>
    </div>
    <div class="item">
        <img src="img/demo04/1.webp" alt="">
        <p class="p1">Xiaomi 12</p>
        <p class="p2">全新骁龙8 | 5000万主摄</p>
        <p class="p3">3699元起</p>
    </div>
    <div class="item" style="float: none; border-right: 16px solid #f5f5f5;">
        <img src="img/demo04/2.webp" alt="">
        <p class="p1">Xiaomi 12X</p>
        <p class="p2">骁龙870 | 5000万主摄</p>
        <p class="p3">3199元起</p>
    </div>
    <div class="item" style="border-bottom: 16px solid #f5f5f5;">
        <img src="img/demo04/3.webp" alt="">
        <p class="p1">Redmi Note 11 Pro系列</p>
        <p class="p2">三星AMOLED高刷屏</p>
        <p class="p3">1799元起</p>
    </div>
    <div class="item" style="border-bottom: 16px solid #f5f5f5;">
        <img src="img/demo04/5.webp" alt="">
        <p class="p1">Redmi Note 11 5G</p>
        <p class="p2">5000mAh大电量</p>
        <p class="p3">1199元起</p>
    </div>
    <div class="item" style="border-bottom: 16px solid #f5f5f5; border-right: 16px solid #f5f5f5;">
        <img src="img/demo04/6.webp" alt="">
        <p class="p1">Redmi Note 11 4G</p>
        <p class="p2">5000mAh大电量</p>
        <p class="p3">999元起</p>
    </div>
</body>
</html>

实现：
请添加图片描述
demo05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo05</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .item{
            width: 620px;
            height: 122px;
            /* background-color: cyan; */
            overflow: hidden;
        }
        .item img{
            width: 92px;
            height: 92px;
            margin-left: 24px;
            margin-top: 15px;
            border: 1px solid #eaeaea;
            border-radius: 50%;
            float: left;
        }
        .item .p1{
            /* width: 120px;
            height: 40px; */
            font-size: 26px;
            color: #333333;
            margin-left: 20px;
            margin-top: 15px;
            /* background-color: yellowgreen; */
            float: left;
            /* display: inline; */
        }
        .item .p2{
            /* width: 120px;
            height: 40px; */
            margin-top: 15px;
            margin-left: 476px;
            font-size: 26px;
            color: #3dbf40;
            /* background-color: plum; */
            text-align: center;
            /* float: left; */
            /* display: inline; */
        }
        .item .p3{
            /* width: 280px;
            height: 36px; */
            font-size: 22px;
            color: #969696;
            margin-left: 138px;
            margin-top: 15px;
            /* background-color: tomato; */
            /* display: inline; */
        }
        
    </style>
</head>
<body>
    <div class="item">
        <img src="img/demo05/1.webp" alt="">
        <p class="p1">卢璐说</p>
        <p class="p2">+关注</p>
        <p class="p3">写了2133.8k字·34.7k喜欢</p>
    </div>
    <div class="item">
        <img src="img/demo05/2.webp" alt="">
        <p class="p1">简书钻首席小管家</p>
        <p class="p2">+关注</p>
        <p class="p3">写了458.9k字·115.3k喜欢</p>
    </div>
    <div class="item">
        <img src="img/demo05/3.webp" alt="">
        <p class="p1">格列柯南</p>
        <p class="p2">+关注</p>
        <p class="p3">写了722.5k字·18.4k喜欢</p>
    </div>
    <div class="item">
        <img src="img/demo05/4.webp" alt="">
        <p class="p1">Hobbit霍比特人</p>
        <p class="p2">+关注</p>
        <p class="p3">写了429.5k字·1.9k喜欢</p>
    </div>
    <div class="item">
        <img src="img/demo05/5.webp" alt="">
        <p class="p1">梅拾璎</p>
        <p class="p2">+关注</p>
        <p class="p3">写了265.5k字·31.5k喜欢</p>
    </div>
</body>
</html>

实现：
请添加图片描述