我的导航栏中心有问题。 [英] am having trouble centering my navigation bar.

问题描述

I am having trouble centering my navigation bar.

This is the example nav bar I am working with

<style>
/* Begin Navigation Bar Styling */
#nav {
  width: 100%;
  float: left;
  margin: 0 0 3em 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc; }
#nav li {
  float: left; }
#nav li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #ccc; }
#nav li a:hover {
  color: #c00;
  background-color: #fff; }
/* End navigation bar styling. */
</style>
but as seen, the navigation bar is not centered.

I have tried using auto margins but it doesn't work. How do I go about fixing this?

推荐答案

我没有看到你为中心做的任何对齐。即使在你没有来对齐之后，也要尝试将它放在div标签中并对齐div中心。

I didn't see any alignment you made for center. Even after you put the alignment if it is not come, then try to put that in the div tag and align that div center.

对您的代码进行轻微更改，

Hi,


Slight change to your code,

#nav {
        width: 100%;
        float: left;
        margin: 0 0 3em 0;
        padding: 0;
        text-align:center;
        list-style: none;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
    }

        #nav li {
            /*float: left;*/
            display:inline;
        }

            #nav li a {
                display: block;
                padding: 8px 15px;
                text-decoration: none;
                font-weight: bold;
                color: #069;
                border-right: 1px solid #ccc;
            }

                #nav li a:hover {
                    color: #c00;
                    background-color: #fff;
                }

希望这是你的预期......

Hope this is what you expected..

这篇关于我的导航栏中心有问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！