体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

字体图标不居中

来源：6-2 倒计时模块设置

liuben

2022-09-23 09:34:27

相关代码：

<!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>慕课网首页</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/01-header.css">
    <link rel="stylesheet" href="./css/02-banner.css">
    <link rel="stylesheet" href="./css/03-ms.css">
</head>
<body>
    <!-- 头部区域开始 -->
    <div id="header" class="bgfff">
        <div class="nav-box" >
            <!-- logo设置 -->
            <h1 class=" fl">
                <a href="inedx1.html">慕课网</a>
            </h1>
            <!-- 课程导航栏 -->
            <ul class="item-box fl">
                <li>
                   <a href="#">免费课</a> 
                </li>
                <li>
                   <a href="#">实战课</a> 
                </li>
                <li>
                   <a href="#">体系课</a> 
                </li>
                <li>
                   <a href="#">慕课教程</a> 
                </li>
                <li>
                   <a href="#">专栏</a> 
                </li>
                <li>
                   <a href="#">手记</a> 
                </li>
                <img src="./images/new.png" alt="">
            </ul>
            <!-- 搜索框 -->
            <div class="search fl">
                <div>
                    <input type="text">
                    <span class="iconfont icon-sousuo"></span>
                </div>
            </div>
            <!-- 登录区域 -->
            <div class=" login-area fr">
                <a href="#">登录</a>|
                <a href="#">注册</a>
                <a href="#" class="shop-cart">
                    <!-- 添加图标 -->
                    <span class="iconfont icon-tianchongxing-"></span>
                    我的课程
                </a>
                <span class="cart-numb">7</span>
            </div>
        </div>
    </div>
    <!-- 头部区域结束 -->

    <!-- 课程分类和轮播图开始 -->
    <div id="banner">
        <div class="banner-box w">
            <div class="g-banner">
            <div class="course-list fl">
                <ul>
                    <li>
                        <span class="title">前端开发: </span>
                        <span class="sub-title">HTML5/Vue.js/Node.js</span>
                        <span class="iconfont icon-yousanjiao"></span>
                    </li>
                    <li>
                        <span class="title">后端开发: </span>
                        <span class="sub-title">Java/Go/Python</span>
                        <span class="iconfont icon-yousanjiao"></span>
                    </li>
                    <li>
                        <span class="title">移动开发: </span>
                        <span class="sub-title">Flutter/Android/iOS</span>
                        <span class="iconfont icon-yousanjiao"></span>
                    </li>
                    <li>
                        <span class="title">计算机基础: </span>
                        <span class="sub-title">算法/数学/数据库</span>
                        <span class="iconfont icon-yousanjiao"></span>
                    </li>
                    <li>
                        <span class="title">前沿技术: </span>
                        <span class="sub-title">AI/大数据/数据分析</span>
                        <span class="iconfont icon-yousanjiao"></span>
                    </li>
                    <li>
                        <span class="title">测试运维: </span>
                        <span class="sub-title">自动化测试/容器</span>
                        <span class="iconfont icon-yousanjiao"></span>
                    </li>
                    <li>
                        <span class="title">更多方向: </span>
                        <span class="sub-title">产品设计/UI设计/游戏</span>
                        <span class="iconfont icon-yousanjiao"></span>
                    </li>
                </ul>
            </div   >
            <div class="swiper fr">
                <a href="#" target="_blank"></a>
                <div class="arrow arrow-l">
                    <span class="iconfont icon-angle-left"></span>
                </div>
                <div class="arrow arrow-r">
                    <span class="iconfont icon-angle-right"></span>
                </div>
                <!-- 切图圆点 -->
                <ul class="circle-list">
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <!-- 体系课 -->
        <div class="sys-class">
            <a href="#" class="show-box">
                <div class="sys-icon fl" style="background-image: url(./images/system/java.png);"></div>
                <div class="title fl">
                    <h4>Java工程师</h4>
                    <p>综合就业率第一</p>
                </div>
            </a>
            <a href="#" class="show-box">
                <div class="sys-icon fl" style="background-image: url(./images/system/h5.png);"></div>
                <div class="title fl">
                    <h4>前端工程师</h4>
                    <p>入门快、就业快、岗位多</p>
                </div>
            </a>
            <a href="#" class="show-box">
                <div class="sys-icon fl" style="background-image: url(./images/system/python.png);"></div>
                <div class="title fl">
                    <h4>Python工程师</h4>
                    <p>应用领域最广泛</p>
                </div>
            </a>
            <a href="#" class="show-box">
                <div class="sys-icon fl" style="background-image: url(./images/system/web.png);"></div>
                <div class="title fl">
                    <h4>Web前端架构师</h4>
                    <p>培养前端P7级架构师</p>
                </div>
            </a>
            <a href="#" class="show-box">
                <div class="sys-icon fl" style="background-image: url(./images/system/java-s.png);"></div>
                <div class="title fl">
                    <h4>Java架构师</h4>
                    <p>千万级电商架构0-100</p>
                </div>
            </a>
            <div class="line"></div>
            <a class="more-btn">
                <div>体系课</div>
                <div>more
                    <span class="iconfont icon-angle-right"></span>
                </div>
            </a>
        </div>
        </div>
    </div>
    <!-- 课程分类和轮播图结束 -->

    <!--限时拼团  开始-->
    <div id="ms">
        <div class="ms-box w"> 
            <h3><img src="images/cate/title-bg6.png " ></h3>
            <div class="countdown-box">
                <div class="countdown fl">
                    <h4>限时拼团</h4>
                    <div class="iconfont icon-shizhong"></div>
                    <!-- <p>拼团倒计时</p>
                    <div class="timer"> 
                        <div id="hour">17</div>
                        <span>:</span>
                        <div id="min">25</div>
                        <span>:</span>
                        <div id="sec">08</div>
                     </div> -->
                </div>
                <div class="ms-list fr"></div>
            </div>
        </div>
    </div>
     <!--限时拼团  开始-->

   <script src="./Js/index.js"></script> 
</body>
</html>

相关代码：

/* 限时拼团 */
#ms{
    padding: 20px 0;
}
.ms-box{
    height: 342px;
   
}
.ms-box h3{
    height: 82px;

}
.ms-box h3 img{
    width: 180px;
}

.countdown-box{
    height: 260px;
}

 .countdown{
    height: 260px;
    width: 185px;
    background-color: #e94443;
    color: black;
    text-align: center;
   
}
.countdown .iconfont{
    font-size: 50px;
    height: 700px;问题描述：
}
.countdown-box .ms-list{
    height: 260px;
    width: 960px;
    background-color: orange;
}


.ms-box .countdown h4{  
    font-size: 20px;
    margin-top: 20px;
}

.countdown p{
    margin-top: 10px;
 
}
 .timer #hour{
    display: inline-block;
}
 .timer #min{
    display: inline-block;
}
 .timer #sec{
    display: inline-block;
}

在countdown中设置了 text-aglin：center，但是子元素 iconfont {}却总是居中不了，其他p标签中的文字是可以的，

相关截图：

https://img.mukewang.com/climg/632d0d1a09de69ba20060617.jpg

写回答

1回答

好帮手慕小脸

2022-09-23

同学你好，老师在另一个问答中回复了你，记得前去查看~

https://class.imooc.com/course/qadetail/334838

祝学习愉快~

0

0 学习 · 9886 问题

查看课程

相似问题

倒计时模块，文字图标居中问题

回答 1

图片居中显示

回答 1

在arrow中设置了text-align：center，但是这个图标不居中是为啥呀

回答 1

老师教我修复一下轮播图

回答 1

前端综合案例-仿慕课首页中，上下居中不是“line-height”吗，这里为什么用“padding”？

回答 1

打开慕课网App查看更多内容