不能居中这

我尝试中心的导航段落，它不会居中。我现在已经尝试了很多东西，但无法找到结果。不能居中这

这里是我的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

回答

相关问题