Question

在我的CSS中，我有以下内容：

的style.css

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    font-family: 'Cabin', sans-serif;
}

/*.clear {
    clear: both;
}*/

.clear:after {
    display: block;
    clear: both;
    visibility: hidden;
    content: "";
    height: 0;
}

/* HEADER BLOCK */

.header-background {

    padding-top: 50px;
}

.header-background > div:first-child {
    width: 100%;
    background: #232323;
}

.header {
    background: #232323;
    color: #B2B2B2;
    width: 80%;
    margin: auto;
}

.header a {
    text-decoration: none;
    color: white;
}

.header a:active {
    color: #19A3A3;
}

#nav {
    position: relative;
    display: block;
    height: 55px;
    line-height: 55px;
    width: 100%;
    max-width: none;
    margin: 0;
    background: #333;

    z-index: 1;
    border-bottom: 1px solid #666;
    font-weight: 600;
    font-family: helvetica, arial, sans-serif;
    font-size: 14px;
}

#nav, #nav * {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.nav-item {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}


/* Desktop */

#desktop-nav .nav-item {
    display: block;
    padding: 0 20px;
    float: right;

    -webkit-transition: color 200ms linear;
    -moz-transition: color 200ms linear;
    -ms-transition: color 200ms linear;
    -o-transition: color 200ms linear;
    transition: color 200ms linear;
}

#desktop-nav .nav-item:hover, #desktop-nav .nav-item:active {
    opacity: 0.7;
}

我有以下html：

<body>
    <div class="header-background">
        <!-- <div> -->
         <div id="nav">
             <nav id="desktop-nav">
                <a class="nav-item" href="#1">Github</a>
                <a class="nav-item" href="#2">About</a>
                <a class="nav-item" href="#3">Community</a>
                <a class="nav-item" href="#4">Docs</a>
             </nav>
         </div>    
    </div>
</body>

现在我得到的观点是： - This view

但我想要的观点如下： - Like that

菜单应位于中间。我使用过text-align: center;但它没有执行。我做错了什么？

Answer 1

更改此

#nav {
    margin: 0 auto;   //added this
    width: 400px;     //added this
    position: relative;
    display: block;
    height: 55px;
    line-height: 55px;
    max-width: none;
    background: #333;
    z-index: 1;
    border-bottom: 1px solid #666;
    font-weight: 600;
    font-family: helvetica, arial, sans-serif;
    font-size: 14px;
}

小提琴：https://jsfiddle.net/fuehunfz/

Answer 2

目前＃desktop-nav是居中的，但它的宽度为100％，所以你需要通过将其inline-block缩小包装。

然后＃nav上的text-align:center会将其居中。

  #nav {
        text-align: center;
    }

 #desktop-nav {
     display: inline-block;
 }

JSfiddle Demo

Answer 3

在CSS类中使用以下CSS样式

保证金：0自动;

如何放置css div容器“text-align：center;”

3 个答案: