Question

我试了很长时间，因为我想承认。我有一个非常基本的网站，经过长时间的尝试，我可以将标题图像居中，但导航栏不想。

这是我的css：

nav {
background-color: #fff;
border: 1px solid #dedede;
border-radius: 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: #888;
display: block;
margin: 8px 22px 8px 22px;
overflow: hidden;
width: 510px;
text-align: center;
}

nav ul {
    margin: 0;
    padding: 0;
}

这是我的HTML：

<div style="text-align:center"><img src="/images/headerbackgr1.png" alt="header_backgr"></div>

<nav>
<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="/owncloud/index.php">ownCloud</a></li>
    <li><a href="download.php">Downloads</a></li>
    <li>
        <a href="about.html">Über BenDroid <span class="caret"></span></a>
        <div>
            <ul>
                <!--ausgeblendete Optionen
                <li><a href="location.htm">Standort</a></li>
                <li><a href="staff.htm">Team</a></li>
                -->
                <li><a href="contact.php">Kontakt</a></li>
            </ul>
        </div>
    </li>
</ul>

这是一个小提琴：http://jsfiddle.net/68x4uL1g/1/

非常感谢任何帮助。

Answer 1

为您的Nav元素提供一个对此场景有意义的边距：

margin: 8px auto;

这将自动为元素提供8px的上下边距，并将其居中于左右边距，使它们相等。

你目前有

margin: 8px 22px 8px 22px;

其中左边距和右边距指定为22像素，这对菜单产生了不良影响。

这是你改变的小提琴：

JSFiddle

提醒：这是正确的，但请记住，这会将nav放在包含父元素的中心。在定义包含元素的宽度时请记住这一点。

无法使导航栏居中

1 个答案: