-1
votes

Comment centrer la partie principale de NAVBAR?

J'ai une barre Navère qui a 4 boutons d'étiquette d'ancrage au centre (maison, sur, services, contact). Je ne sais pas comment le centrer sur la barre Naville. J'ai une autre balise d'ancrage à l'extrême gauche de la barre Naville (un numéro de numéro de téléphone). Il semble que la partie que je souhaite centrer est centrée entre la limite de ce lien de gauche à gauche et l'extrême droite de la page.

Je ne peux pas comprendre comment centrer ces 4 tags sur la grille.

espère que cela a du sens, je ne suis pas trop bon avec le jargon.

xxx


3 commentaires

Qu'avez-vous essayé? Vous devriez essayer de fournir un JS FIDDLE du scénario afin que nous puissions jeter un coup d'œil à un exemple de travail.


S'il vous plaît ajouter le CSS pertinent


Donc, je travaille à partir d'un modèle et je ne suis pas totalement sûr où le CSS pertinent est. C'est quelque chose de mon problème. Je ne fais même pas maintenant où chercher à modifier les choses de CSS. Comment puis-je inclure un violon? J'ai un compte et le HTML et CSS chargé dans un violon Page.Just ne savez pas comment montrer aux gens ici


3 Réponses :


0
votes

Vous pouvez utiliser des flotteurs pour positionner les éléments côte à côte de la page, puis jouer avec les largeurs et le rembourrage pour les organiser. Si vous n'êtes pas sûr de savoir comment utiliser CSS, je suggère de suivre quelques didacticiels en ligne.

p>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">



<nav>
  <div class="left">
    <p>000 000 0000</p>
  </div>
  <div class="right">
    <ul>
      <li><a href="#"><i class="fas fa-phone"></i><br><span>Contact</span></a></li>
      <li><a href="#"><i class="fas fa-wrench"></i><br><span>Services</span></a></li>
      <li><a href="#"><i class="fas fa-at"></i><br><span>About</span></a></li>
      <li><a href="#"><i class="fas fa-home"></i><br><span>Home</span></a></li>
    </ul>
  </div>
</nav>


4 commentaires

Ok je l'ai centré sur la façon dont je veux. Le problème est maintenant que la case que celle-ci contenue est verticalement trop grande. Comment puis-je rétrécir cela jusqu'à la taille d'origine? J'ai pris ce CSS:


@Robbienichols pourrait être plusieurs raisons de cela. Si vous cliquez avec le bouton droit de la souris sur le navigateur et sélectionnez «Inspecter», un panneau apparaîtra qui vous permet d'inspecter les éléments de la page. Vous pourrez voir la hauteur des éléments et s'il y a un rembourrage sur eux. Cela pourrait être aussi simple que de régler la hauteur de la valeur liquidative mais sans avoir l'air difficile à dire. la "marge: 200px;" est probablement un problème aussi, car il définira la marge de tous les côtés, y compris le haut et le bas. U pourrait utiliser la marge: 20px 400px; ou encore mieux chercher à régler la largeur de l'UL puis "LI {margin: 20px Auto;}"


J'ai changé la largeur ul et je l'ai obtenue parfaitement centrée. Mais maintenant, mon menu déroulant Hamburger est parti quand je vais à la taille mobile ..... Ugh!


@Robbienichols Bienvenue sur le développement Web. Il y a toujours un problème à réparer. Le menu Hamburger pourrait être un problème de z-index. C'est un peu hors de la portée de votre question initiale.



0
votes

Il y a beaucoup de CSS existant qui est venu avec ce modèle. Pour que je puisse exécuter votre CSS et HTML, cela modifierait trop de propriétés sur le point où sa méconnaissance. Malgré cela, c'est une réponse parfaite. Cependant: j'ai pris votre CSS:

nav ul {
display: inline-block;
text-align: center;
width: 1100px;
margin: 200px;
padding: 200px;
 }


0 commentaires

0
votes

OK permet de recommencer. Je veux juste centrer ces 4 ANCHOR TAG LI'S À L'INTÉRIEUR DE CETTE UL.

est-ce que je peux envelopper ces quatre dans un conteneur, puis les déplacer à gauche avec CSS? Je veux juste que ces 4 articles apparaissent centrés dans cette UL. P>

Heres une image de ce que je parle p >

ci-dessous est mon en-tête total dans HTML. Theres beaucoup de CSS, donc je ne sais donc pas quoi relier les gens à mais mal énormément ce que je joue avec ci-dessous. P> xxx pré>

--- CSS --- P >

nav ul li  {
display: inline-block;
text-align: center;
width: 100px;
margin: 00px;
padding: 0px;
 }


0 commentaires