不能居中這

我嘗試中心的導航段落，它不會居中。我現在已經嘗試了很多東西，但無法找到結果。不能居中這

這裏是我的CSS：

header { 
 
    background: #444444; 
 
    z-index: 100; 
 
    transition: height 600ms 0s ease; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    color: #ffffff; 
 
} 
 

 
#head { 
 
    font-family: quicksand; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    background: #333333; 
 
    position: fixed; 
 
    top: 82px; 
 
    right: 0; 
 
    left: 0; 
 
    color: #ffffff; 
 
} 
 

 
.navs { 
 
    font-family: quicksand; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
a, 
 
a:link, 
 
a:visited, 
 
a:hover { 
 
    text-decoration: none; 
 
    color: white; 
 
    font-family: quicksand 
 
} 
 

 
#left { 
 
    margin-right: 15px; 
 
} 
 

 
Here is my HTML :

<header> 
 
    <h1 id="head">Resume - Mathias Nicolajsen</h1> 
 
</header> 
 
<nav> 
 
    <a href="diagonaler.html"><strong><p class="navs" id="left">Projecter</p></strong></a> 
 
    <strong><p class="navs">Omkring mig</p></strong> 
 
</nav> 
 
<p>Lavet af Mathias Nicolajsen</p>

我怎麼能這樣做？

來源

2017-10-13 Mathias

你嘗試**保證金：0汽車**有**浮動：無** – LSKhan

可以請你分享你的HTML片段 – LSKhan

只需添加text-align: center;到nav { }居中的元素。

來源

2017-10-13 07:01:13 Boratzan

header { 
 
    background: #444444; 
 
    z-index: 100; 
 
    transition: height 600ms 0s ease; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    color: #ffffff; 
 
} 
 

 
#head { 
 
    font-family: quicksand; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    background: #333333; 
 
    position: fixed; 
 
    top: 82px; 
 
    right: 0; 
 
    left: 0; 
 
    color: #ffffff; 
 
    text-align: center; 
 
} 
 

 
.navs { 
 
    font-family: quicksand; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
a, 
 
a:link, 
 
a:visited, 
 
a:hover { 
 
    text-decoration: none; 
 
    color: white; 
 
    font-family: quicksand 
 
} 
 

 
#left { 
 
    margin-right: 15px; 
 
}

<header> 
 
    <h1 id="head">Resume - Mathias Nicolajsen</h1> 
 
</header> 
 
<nav> 
 
    <a href="diagonaler.html"><strong><p class="navs" id="left">Projecter</p></strong></a> 
 
    <strong><p class="navs">Omkring mig</p></strong> 
 
</nav> 
 
<p>Lavet af Mathias Nicolajsen</p>

嘗試添加text-align: center

來源

2017-10-13 07:00:37 zynkn

-1

試試這個。只有與text-align: center;你的問題將得到解決。

header { 
 
    background: #444444; 
 
    z-index: 100; 
 
    transition: height 600ms 0s ease; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    color: #ffffff; 
 
} 
 

 
#head { 
 
    font-family: quicksand; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    background: #333333; 
 
    position: fixed; 
 
    top: 82px; 
 
    right: 0; 
 
    left: 0; 
 
    color: #ffffff; 
 
    text-align: center; 
 
} 
 

 
.navs { 
 
    font-family: quicksand; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
a, 
 
a:link, 
 
a:visited, 
 
a:hover { 
 
    text-decoration: none; 
 
    color: white; 
 
    font-family: quicksand 
 
} 
 

 
#left { 
 
    margin-right: 15px; 
 
}

<header> 
 
    <h1 id="head">Resume - Mathias Nicolajsen</h1> 
 
</header> 
 
<nav> 
 
    <a href="diagonaler.html"><strong><p class="navs" id="left">Projecter</p></strong></a> 
 
    <strong><p class="navs">Omkring mig</p></strong> 
 
</nav> 
 
<p>Lavet af Mathias Nicolajsen</p>

來源

2017-10-13 07:03:51 nabanita

沒有看到你的答案和upvoted答案之間的任何區別。這就是爲什麼投票。 –

誰曾經投票回答我的回答，在給出答案之前應該知道，當我通過代碼片段開始回答時，那個時候沒有回覆。如果其他人也比我的帖子快速給出相同的答案，並且如果我的帖子花了一些時間片段，並不意味着這是錯誤的答案或複製。當你投票時，其他人不會認爲它有幫助。當我發佈時，我看到其他人有相同的答案，我也可以投票或刪除我的答案。相反，我一直認爲它可以幫助別人。當你投票時，這是你的要求，但也應考慮其他條件。 – nabanita

只需更換您的nav有以下CSS

nav { 
     background: #333333; 
     position: fixed; 
     top: 82px; 
     right: 0; 
     left: 0; 
     color: #ffffff; 
     text-align: center; 
    }

來源

2017-10-13 07:50:13 Anuresh

回答

相關問題