1
votes

Comment centrer le menu dans la page au lieu de l'avoir sur la gauche

J'ai utilisé cet outil pour générer le menu: https: //www.cssportal. com / css3-menu-Generator / Cela fonctionne très bien sauf que le menu est aligné horizontalement sur la gauche de la page.

J'ai essayé d'envelopper le contenu en div et d'utiliser l'alignement du texte. J'ai essayé d'utiliser la gauche et la marge gauche Mais le dernier élément du menu passe à la ligne suivante.

Ce que je veux, c'est avoir tout le menu assis au milieu de la page (horizontalement).

texte du lien

<ul id="menu-bar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">About</a></li>
</ul>

#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 4px 6px;
  height: 40px;
  line-height: 100%;
  background: #FFFFFF;
  border: solid 0px #FFFFFF;
  position: relative;
  z-index: 999;
}

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  float: left;
  position: relative;
  list-style: none;
}

#menu-bar a {
  font-weight: normal;
  font-family: arial;
  font-style: normal;
  font-size: 17px;
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 8px;
}

#menu-bar .active a,
#menu-bar li:hover>a {
  background: #FFFFFF;
  color: #FA550F;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#menu-bar {
  display: inline-block;
}

html[xmlns] #menu-bar {
  display: block;
}

* html #menu-bar {
  height: 1%;
}

html css menu centering

1 commentaires

Salut Dan et bienvenue sur Stack Overflow. Je viens de vérifier votre violon et tous les éléments apparaissent sur une seule ligne mais alignés à gauche. Peut-être que votre résolution ou vos paramètres de violon provoquent le saut de ligne. Pouvez-vous décrire un peu plus ce que vous souhaitez réaliser? "... sauf que le menu est aligné horizontalement sur la gauche de la page" sonne comme si vous vouliez qu'il s'aligne différemment.

7 Réponses :

0
votes

Vous devez ajouter text-align: center; dans # barre de menu, supprimez float: left; à partir de # menu-bar li et ajoutez display: inline-block;

Le code correct:

#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 4px 6px;
  height: 40px;
  line-height: 100%;
  background: #FFFFFF;
  border: solid 0px #FFFFFF;
  position: relative;
  z-index: 999;
  text-align: center;
}

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  position: relative;
  list-style: none;
  display: inline-block;
}

0 commentaires

0
votes

Appliquer sur menu-bar CSS:

display: inline-block;

Ou:

left: 50%;

Ajoutez également barre de menu li CSS:

margin: 0 auto;

0 commentaires

0
votes

Essayez d'utiliser diplay: flex pour effectuer l'alignement facilement. Ceci est un exemple de code

HTML

#menu-bar {
  height: 40px;
  line-height: 100%;
  background: #FFFFFF;
  border: solid 0px #FFFFFF;
  position: relative;
  z-index: 999;
}

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  float: left;
  position: relative;
  list-style: none;
}

#menu-bar a {
  font-weight: normal;
  font-family: arial;
  font-style: normal;
  font-size: 17px;
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 8px;
}
#menu-bar .active a, #menu-bar li:hover > a {
  background: #FFFFFF;
  color: #FA550F;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

CSS

<div class="flex">
<ul id="menu-bar">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">About</a></li>
</ul>
</div>

JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/6z483d7n/

0 commentaires

1
votes

J'ai modifié le CSS pour obtenir le résultat.

<ul id="menu-bar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">About</a></li>
</ul>

J'ai changé la propriété d'affichage # menu-bar en display: block; code > et pour créer un lien à l'intérieur au centre, utilisez text-align: center; . Mais il ne suffira pas de créer le centre du lien, j'ai donc effectué la modification suivante.

#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 4px 6px;
  height: 40px;
  line-height: 100%;
  background: #FFFFFF;
  border: solid 0px #FFFFFF;
  position: relative;
  z-index: 999;
}

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  /**float: left;**/
  position: relative;
  list-style: none;
  display: inline-block;
}

#menu-bar a {
  font-weight: normal;
  font-family: arial;
  font-style: normal;
  font-size: 17px;
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 8px;
}

#menu-bar .active a,
#menu-bar li:hover>a {
  background: #FFFFFF;
  color: #FA550F;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#menu-bar {
  /*display: inline-block;*/
  display: block;
  text-align: center;
}

html[xmlns] #menu-bar {
  display: block;
}

* html #menu-bar {
  height: 1%;
}

float: left forçant en fait les éléments du lien à gauche, Je l'ai omis et en ai fait un élément en ligne avec display: inline-block; .

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  /**float: left;**/
  position: relative;
  list-style: none;
  display: inline-block;
}

#menu-bar {
  /* display: inline-block;*/
  display: block;
  text-align: center;
}

2 commentaires

Ça marche. Merci. Pour une raison quelconque, la gauche sur "largeur: 95%;" perturbait l'alignement.

@DanCele Si cela fonctionne, vous devez accepter la réponse en cliquant sur la coche grise ✔ . De cette façon, les autres peuvent savoir qu'il existe une solution de travail à ce problème.

0
votes

En option, ajoutez la propriété text-align au conteneur:

#menu-bar li {
    margin: 0px 0px 8px 0px;
    padding: 0px 20px 0px 4px;
    list-style: none;
    display: inline-block;
}

et changez les styles de

    #menu-bar {
    width: 95%;
    margin: 0px 0px 0px 0px;
    padding: 6px 6px 4px 6px;
    height: 40px;
    line-height: 100%;
    background: #FFFFFF;
    border: solid 0px #FFFFFF;
    position: relative;
    z-index: 999;
    text-align: center;
}

0 commentaires

0
votes

il suffit de modifier le style de # barre de menu:

#menu-bar {
display: flex;
justify-content: center;
align-items: center
}

capture d'écran:

p >

0 commentaires

0
votes

Vous pouvez centrer des éléments en ligne horizontalement, dans un élément parent au niveau du bloc, avec seulement:

.center-me {
  margin: 0 auto;
}

Vous pouvez centrer un élément au niveau du bloc en lui donnant margin-left et margin-right de auto (et il a une largeur définie, sinon il serait pleine largeur et n'aurait pas besoin de centrage). Cela se fait souvent avec un raccourci comme celui-ci:

.center-children {
  text-align: center;
}

Je recommande à tout cet article https://css-tricks.com/centering-css-complete-guide/

0 commentaires