倒计时模块的“：”位置不对

相关截图：

请问老师我的页面里数字之间的冒号为啥是居下的？我换了全角和半角的都是这个样子，貌似也没在老师的css里找到哪里有单独给这两个span设置样式的代码。

Masato1990 2022-10-30

源自：前端综合案例-仿慕课首页 6-2 倒计时模块设置

收起

1回答

好帮手慕小小 2022-10-30 11:39:20

同学你好，可通过如下代码设置height与line-height一样的值，来设置文本垂直居中显示：

display: inline-block;
height: 100px;
line-height: 100px;

祝学习愉快~

收起回答

提问者 Masato1990 #1

谢谢老师解答，不过我刚找到了问题发生的地方，但没想清楚为什么……

问题在这段代码，开头我没在显示时分秒的div里填东西，倒计时结束后，我刷新页面，冒号就塌下去了=>

<p>拼团倒计时</p>
                    <div class="timer">
                        <div id="hour"></div>
                        <span>:</span>
                        <div id="min"></div>
                        <span>:</span>
                        <div id="sec"></div>
                    </div>

然后我在里面填了东西，就不会出现问题=>

<p>拼团倒计时</p>
                    <div class="timer">
                        <div id="hour">00</div>
                        <span>:</span>
                        <div id="min">00</div>
                        <span>:</span>
                        <div id="sec">00</div>
                    </div>