我有一个问题集中在我为我的班级创建的导航菜单,我已经尝试了所有text-align,margin-left / margin-rgiht,将它居中于html等。我找到的每个站点都告诉我margin-left:auto; 和保证金权利:auto; 但那不起作用。 这是我需要在页面中自动居中的菜单。

    <div class="menu">
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="artwork.html">Artwork</a>
        <ul>
            <li><a href="#">Pencil</a></li>
            <li><a href="#">Pastel</a></li>
            <li><a href="#">Color Pencil</a></li>
            <li><a href="#">Charcoal</a></li>
            <li><a href="#">Digital</a></li>
        </ul>
    </li>
    <li><a href="#">Projects</a>
        <ul>
            <li><a href="#">74 Duster</a></li>
            <li><a href="#">The "Beast"</a></li>
            <li><a href="#">Darkness and Hope</a></li>
        </ul>
    </li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">Who I am and why it matters</a></li>
            <li><a href="#">Contact Me</a></li>
        </ul>
    </li>
</ul>
</div>

这是它的CSS:

.menu {
margin-right:auto;
margin-left:auto;
max-width:700px;
display:inline-block;
padding:0px;
font-size:14px;
font-weight:bold;
text-align:center;
}

.menu ul {
width:700px;
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
text-align:center;
}

.menu li {
width:175px;
text-align:center;
float:left;
padding:0px;
}

.menu li a {
background:#333333;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a {
background: #2580a2;
color:#FFFFFF;
text-decoration:none;
}

.menu li ul {
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:175px;
z-index:200;
}

.menu li:hover ul {
display:block;

}

.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:175px;
}

.menu li:hover li a {
background:none;
}

.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a {
background:#2580a2;
border:0px;
color:#FFFFFF;
text-decoration:none;
}

任何帮助都将非常感激,或者如果您知道一种方法来集中整个网页并将内容扩展到观众的分辨率,这将是很好的。

===============>>#1 票数:2 已采纳

.menudisplayinline-block更改为block

  ask by Fractal Fear translate from so

未解决问题?本站智能推荐:

2回复

Blogger中心导航栏

我想将导航栏居中。 我使用Blogger的“简单模板”。 我发现相关的代码:
2回复

将NavBar中心与width:100%对齐;

我知道这个问题已被问过100次,但是我找不到能帮助我的话题。 我试图居中导航栏,而我的div的宽度为100%。 我只希望导航栏居中。 任何帮助将不胜感激! 这是我的HTML: 而我的CSS:
1回复

Boostrap Navbar品牌左侧和链接为中心

我遵循此代码左侧品牌和中心链接: .flex-fill { flex:1; } <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstra
2回复

以某个字母为中心的文字

我正在尝试在Nav Bar(使用引导程序)中集中情感。 到目前为止,导航栏如下所示: 导航栏居中居中 我想做的是使用“ |” 居中,旁边紧紧围绕着文本,而不仅仅是使句子居中。 这很难解释,但我希望您理解我的意思-“ |” 居中,文本左右对齐,而不是整个句子居中,中间字母位于中间。
1回复

导航栏未正确居中(HTML / CSS)

我是一个初学者,试图建立我的第一个网站。 我希望它从一开始就具有响应能力,所以我不想有固定的宽度。 好了,现在我创建了一个导航栏-包含4个导航元素-我想将其居中。 我尝试使用text-align: center在我的nav ul -selector中居中,但它无法正确居中。 左侧似乎
2回复

我如何将Twitter-Bootstrap 3导航栏链接中心?

如何将我设置的jsFiddle中的按钮居中,这样按钮的间距相等,并且在导航栏的中心和中心? http://jsfiddle.net/3GQyq/3/ 我尝试了不同的方法,比如 但我无法让它发挥作用。 如果您可以提供一些解释,而不是仅仅修复CSS,因为我想学习,所以我不必
3回复

如何修复此CSS并将菜单水平居中?

我正在尝试删除“联系我们”链接右侧菜单中的垂直线,然后将整个菜单栏居中。 这是代码(JSFiddle链接在底部)。 提前感谢你的帮助 :) HTML: CSS: >>>>请参阅JSFiddle上面的例子
1回复

无法正确居中导航栏(使用col-md-3)引导CSS和HTML

所以基本上我有以下代码:HTML和CSS,也使用了引导程序,由于某种原因,它没有居中。 它曾经是,但在某些时候不再存在,现在它向左拉。 参见下图。 有任何想法吗? 显示代码结果,导航栏偏离中心 http://i.stack.imgur.com/smtTP.png
4回复

CSS:以调整大小为中心内容

我有一个以margin:0 auto为中心的内容区域, width为1280px 。 当我调整浏览器窗口的大小时,如果浏览器的width小于1280px则仅右侧内容会被截断。 有没有一种方法可以使整个站点始终居中,从而使内容区域均匀地左右分割?
5回复

中心内嵌块图像

我需要一些帮助来集中一些图像 HTML: CSS: 我需要将图像居中对齐,以便它们保持对齐。 香港专业教育学院尝试使用: 但是由于每行上的图像数量不同,因此它们会错位 谢谢你的帮助,这让我发疯 编辑:我以为我找到了一个以此为指导的解决方案: http