我的li中的文本没有居中显示

Question

演示链接

我不确定为什么我的第二个列表中的文本没有居中��

HTML代码

<div id="the_target">
    <ul>
        <li>Stephen Marston</li>
        <li>Account Exectutive</li>
        <li>The Company</li>
    </ul>
</div>

SASS:

section {
    #the_requestor {
        margin-top: 40px;
        ul { margin-top: 10px; }
        ul li {
            text-align: center;
            line-height: $px20;
        }
        li:first-child {
            font-family: LatoBold;
            font-size: $px30;
            background: cyan;
        }
    }
    #the_target {
        position: relative;
        margin-top: 40px;
        ul { margin-top: 10px; }
        ul li {
            text-align: center;
            line-height: $px20;
        }
        li:first-child{
            font-family: LatoBold;
            font-size: $px30;
            background: cyan;
        }
    }
}

有什么想法是什么原因导致 Stephen Marston 不能居中吗？

- Leon Gaban

Answer 1

在#mobile-action-area中，有一个浮动元素正在干扰。您需要清除此浮动。有许多方法可以做到这一点。向#mobile-action-area添加overflow: hidden即可解决问题。您还可以尝试以下方法：

#mobile-action-area:after {
    display: table;
    content: "";
    clear: both;
}

- Explosion Pills

---

或者将"display:inline-block;"添加到此样式中："body#mobile-request .container #mobile-action-area" - htxryan

啊，就是这样！我不得不破解我的 #mobile-deny-request，因为某种原因按钮太低了。谢谢! :) - Leon Gaban

Answer 2

在 #the_target 前面需要清除浮动

   #the_target {
            position: relative;
            margin-top: 40px;
            clear:both;
    }

- Slavenko Miljic