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

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

相关代码：<!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;
}

相关截图：

https://img1.sycdn.imooc.com//climg/632d12820963107303600417.jpg

问题描述：

图标没办法居中，在其父元素countdown设置了text-aglin：center；
liuben 2022-09-23
源自：前端综合案例-仿慕课首页   6-2 倒计时模块设置
4
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕小脸 2022-09-23 10:29:53

同学你好，拼接测试上述代码，图标是居中显示的，如下所示：

https://img1.sycdn.imooc.com//climg/632d192409b789d712070391.jpg

猜测可能是其他css中设置的内容将其影响了，或同学其他参数设置问题，同学可尝试给图标设置移动，使其进行对齐

注：若还是不可以，建议同学将其他css反馈一下~

祝学习愉快~

1
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

为什么设置为行内块无法设置文字居中，必须要块级元素
17 0 4
模块居中显示问题
3 0 2
图片不能水平居中
37 0 4
倒计时模块的“：”位置不对
7 0 3
关于元素居中问题?
35 0 3

登录后可查看更多问答，登录/注册

2023版Java工程师
  • 参与学习           人
  • 提交作业       8810    份
  • 解答问题       9886    个

综合就业常年第一，编程排行常年霸榜，北上广深月薪过万！ 不需要基础，无需脱产即可学习，只要你有梦想，想高薪！ 全新升级：技术栈升级（包含VUE3.0，ES6，Git）+项目升级（前后端联调与功能升级）

了解课程

本课精华内容

问答 作业

eclipse打开弹出这样是怎么回事

79 1

找不到jdk版本号的文件夹，打开里面什么都没有

56 1

Cannot resolve symbol 'Valid'

10 1

spring boot 和swagger2版本冲突

14 1

Maven项目管理中，关于Maven和IDE有几点小疑问。

56 9

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师