为什么设置float: left后文字在父元素div内部居中了？

Question

    <div class="g-container">
        <div class="fix-indexNav-bar">
            
            <div class="u-top-nav-logo">
                <a href="">
                    <img width="190" height="28" src="src/img/white-top--nav-logo.png" alt="">
                </a>
            </div>
            
            <div class="u-top-nav-item">
                <a href=""><span>课程</span></a>
            </div>
        </div>
    </div>

Answer 1

这个<span>本身就是占满整个父元素.既然都填满了,所以就不存在在<div>内部居中问题了。

你注意看你贴出来的这两个css。

父元素<div>

width:36px;

子元素<span>

font-size:16px;

float:left影响只是父元素的文档流而已,让父元素脱离正常文档流,使其靠近最左边。然后通过各种定位,让两个

字看起来像是正好在那个logo里居中了

Answer 2

首先，命名没必要这么长；
其次display: inline-block和float了解下用法再使用；
font-family那一部分改一下，而且两种表达都是一种字体；
vertical-align也得了解下用法；
居中line-height比较常用，初学的话不要完全按老师教的来，自己去博客多了解下用法