Question

我是第一次使用HTML用户，需要帮助来集中我当前的导航栏：

http://i.stack.imgur.com/czpJr.jpg

它的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>large background</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />

    </head>
    <body>
        <!div class="navBar">

            <ul>
                <li><a href="#about"><h2>ABOUT</h2></a></li>
                <li><a href="#home"><img src="ICON.jpg" width="60" height="60"></a></li>
                <li><a href="#music"><h2>MUSIC</h2></a></li>
            </ul>

        <!/div>
    </body>
</html>

使用此图像中外部样式表的相关部分（无法将其作为代码块使用 - 请注意我）：

http://i.stack.imgur.com/JaIah.jpg

请帮我解决一下，让这个导航栏出现在页面的中央，而不是左侧。我已经尝试更改CSS中剩余的浮动但是所有操作都是使导航栏垂直显示而不是水平，并且它仍然显示在左侧：（

谢谢，萨姆

Answer 1

注释掉HTML使用这种语法（你错过了破折号）：

<div> this WILL show and be rendered </div>
<!--div> this WILL NOT show or be rendered </div-->

添加＆＃34; float：left＆＃34;对li元素强制你的元素向左对齐。要使导航项水平显示，请使用＆＃34; display：inline-block;＆＃34;代替。此外，您正在使用＆＃34;对齐＆＃34; ...它应该＆＃34; text-align＆＃34;。

codepen中的示例！

http://codepen.io/Drodarious/pen/bdmavb

Answer 2

你可以像这样对待你的元素（参见下面的例子：ul上的文本对齐中心）。你也可以，给ul提供一个宽度，例如300px，然后加上margin：0 auto; margin auto不会在没有设置宽度的情况下处理块元素。或者你应该使用inline-block;

（http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/）

Ps由于h1是块元素，而a是内联元素，正确的方法是

    <h1><a href="#">This is a title</a></h1>

，使用标题时。

虽然因为是一个块元素，它将占用所有可用空间，这意味着所有列表项仍将在彼此之下，因此请指定它应该占用的空间。

＆＃13;

header nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

header nav ul li { 
    display: inline; 
}

header nav ul li a {
    text-decoration: none;
}

＆＃13;

<html>
    <head>
        <title>large background</title>
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="#about">ABOUT</a>
                    <li><a href="#home"><img src="ICON.jpg" width="60" height="60"></a>
                    <li><a href="#music">MUSIC</a>
                </ul>
            </nav>
        </header>
    </body>
</html>

＆＃13;

我建议阅读：http://learnlayout.com/display.html

希望这对你有所帮助。

HTML / CSS无序列表中心对齐

2 个答案: