顶部栏中的中心文字，左侧有徽标

Question

我创建了一个简单的顶部栏，文本居中。我的问题是，如何在左侧放置一个文本标识，文本仍然出现在导航栏的中央并仍然响应？

的CSS：

nav {
    position: absolute;
    top: 0;
    width: 100%;
    height: 40px;
    background: #000;
    opacity: 1.0;
    text-align: center;
}

nav li {
        display: inline-block;
        padding: 10px 10px;
}

nav li a {
    color: #757575;
    text-transform: uppercase;
}


@media only screen and (max-width: 520px) {

    nav li {
        padding: 10px 4px;
    }

    nav li a {
        font-size: 14px;
    }

}

HTML：

<section id="screen1">

    <p>Scroll down</p>

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

</section>

Answer 1

@ user3646311，即使在文本居中的情况下，左侧仍有图像，文本或任何其他元素的CSS样式为float: left;。当你浮动一个元素时，你告诉它去一边而不影响它可能触摸的其他元素。使用position: relative;设置父元素也很重要，这将告诉浮动子元素不要超出父元素的范围。您可以在css-tricks上阅读有关浮动的更多信息。我写了一个工作示例供你在jsfiddle.net玩。

HTML

<nav>
    <img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" />
    <span>Text Logo</span>

    <ul>
        <li><a href="#">Home</a></li>
    </ul>
</nav>

CSS

nav {
    position: relative;
}

/* This is how to float an image */
nav img {
    float: left;
    max-height: 50px;
}

/* This is how to float text */
nav span {
    color: #FFF;
    float: left;
    line-height: 3em; /* Use line-height to vertically position your text */
}