CSS问题居中NavBar | CSS问题居中NavBar

本文介绍了CSS问题居中NavBar的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以，基本上最后一次我做过任何网页开发，只有HTML，我没有超过一个基本的了解。所以现在，我正在赶上，试图学习CSS。我的问题是水平导航栏，它不会保持完全居中。我已经尝试调整宽度，边框和边距，但我错过了一些东西。

So, essentially the last time I ever did any web-page development, there was only HTML, and I didn't have anymore than a basic understanding anyways. So now, I'm playing catch up and trying to learn CSS. My issue is a horizontal navbar, which doesn't stay perfectly centered. I've tried adjusting widths, and borders, and margins but I'm missing something.

在我的当前布局，左边有一些空格

With my current layout, there is a tad more whitespace on the left than the right, and I am stuck.

http://jsfiddle.net/PkvZ7/

CSS：

<!-- JASCO NAVBAR -->
ul
{
width:100%;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:none;
overflow:hidden;
}

li
{
align:center;
width:20%;
margin:0;
padding:0;
display:inline-block;
list-style-type: none;
}
a:link,a:visited
{
display:block;
width:100%;
font-weight:bold;
font-size:20px;
color:#FFFFFF;
background-color:#FF6103;
text-align:center;
padding:5px;
text-decoration:none;
font-variant:small-caps;
}
a:hover,a:active
{
background-color:#000000;
color:#FF6103;
}

#container {
  width:100%
}

<!-- TOP CSS-->
.top {
position:absolute;
width:80%;
height:10%;
margin-left:auto;
margin-top:20px;
margin-right:auto;
color:#000000;
padding:0;
}

<!-- CONTENT CSS-->
.content {
position:absolute;
width 100%;
margin-left:10px;
margin-right:10px;
padding:3px;
color:#dddddd;
}

#img
{
}

<!-- TOP IMAGE CSS-->
img.center {
display:block;
margin-left:auto;
margin-right:auto;
}

HTML：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jascostyle.css">
<title>Single"Frame" Test</title>
</head>

<body>
<div id="container">
  <center>
  <div class="top">
  <img class ="center" width="80%" height="5%" href="#temp" src="#temp" alt="JASCO ENERGY"/>
  <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  </ul>
  </div>


  <div  class="content">
  <h1>This is under construction!</h1>
  </div>
    </div>
  </body>
</html>

感谢您就此问题提供任何帮助/解释。

I appreciate any help/explanation on this matter.

感谢。

推荐答案

您需要一个固定宽度+ margin-left：auto 和 margin-right：auto 。您不应该对自己的内容使用绝对定位 - 让它自然流动。

You need a fixed width + margin-left:auto and margin-right:auto. You should not be using absolute positioning for your content - let it flow naturally.

< center> 标记已被弃用，因此对于宽度为960像素的外部容器包装程序使用相同的技术;。

The <center> tag has been deprecated, so use the same technique for your outer "container" wrapper with a width of 960px;.

ul {
    width:500px;
    list-style-type: none;
    margin-left:auto;
    margin-right:auto;
    padding:0;
}

一般来说，使用基于列表的菜单时，使用 float：left ，在A标签上使用 display：block ，将所有其他样式放在A标签上，而不是列表

In general when using list-based menus, use float:left on your LI, use display:block on the A-tag and put all other styling on the A-tag, not the list itself.

查看我的教程：。

                        这篇关于CSS问题居中NavBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！