2017-10-13 6 views
1

Je tente de centrer les paragraphes de navigation, il ne sera pas centré. J'ai essayé beaucoup de choses maintenant, mais je ne trouve pas le résultat.Impossible de centrer ce

Voici mon 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>

Comment puis-je faire cela?

+0

Avez-vous essayé ** margin: 0 auto ** avec ** float: none ** – LSKhan

+0

pouvez-vous s'il vous plaît partagez-vous html snippet – LSKhan

Répondre

0

Il suffit d'ajouter à text-align: center;nav { } pour centrer les éléments.

0

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>

Essayez d'ajouter text-align: center

-1

Essayez ceci. seulement avec text-align: center; votre problème sera résolu.

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>

+0

N'a pas vu de différence entre votre réponse et votre réponse upvoted. Voilà pourquoi a voté bas. –

+0

Qui a déjà voté ma réponse, devrait savoir avant de donner que lorsque j'ai commencé à répondre à travers l'extrait, aucune réponse n'a été affichée ce moment-là. Si d'autres personnes donnent aussi la même réponse rapidement que mon message et si mon message a pris du temps pour un extrait, cela ne veut pas dire que c'est une mauvaise réponse ou une copie. Quand vous avez voté, les autres ne considèrent pas que c'est utile. Quand j'ai posté j'ai vu d'autres ont la même réponse, je peux aussi voter en bas ou peut supprimer ma réponse. Au lieu de cela, je l'ai gardé ouvert en pensant que cela pourrait aider les autres. C'est votre appel quand vous donnez leur vote mais devrait également considérer d'autres conditions. – nabanita

0

Il suffit de remplacer votre nav avec les éléments suivants CSS

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