Center Richten Sie die Navigationsleiste aus, nachdem die Bildschirmgröße reduziert und die Taste gedrückt wurde.

Ich bin neu in HTML/CSS und erstelle eine Webseite mit einer responsiven Navigationsleiste oben. Das Problem, das ich gegenüberstelle, ist, dass, wenn die navbar ist zusammengebrochen und die Taste gedrückt wird, die navbar-items auf der linken Seite des geöffneten Navigationsmenü ausgerichtet sind. Ich möchte, dass die Elemente ausgerichtet werden, um das Menü zu zentrieren. Ich habe so viel auf SO und W3schools gesucht, aber ich konnte keine Lösung für mein Problem bekommen.Center Richten Sie die Navigationsleiste aus, nachdem die Bildschirmgröße reduziert und die Taste gedrückt wurde.

Hier ist mein HTML-Code verwende ich:

<html> 
<head> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="CSS/stylesheet.css"> 
    <title> 
    My Personal Portfolio 
    </title> 
</head> 
<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><strong>Vatsal Sura</strong></a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav nav-pills navbar-nav navbar-right"> 
      <li class="nav-item active"><a class="nav-link" href="#">ABOUT</a></li> 
      <li class="nav-item "><a class="nav-link" href="#">MY PORTFOLIO</a></li> 
      <li class="nav-item"><a class="nav-link" href="#">CONTACT ME</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</body> 
</html>

Hier ein Bild von der Webseite ist, als es zuerst auf großen Bildschirm geladen wird:

Und hier ist ein anderes Bild, wenn der Browser minimiert ist und die Navigationsleiste minimiert ist:

Und wenn die Schaltfläche angeklickt wird, wird die Navigationsleiste unterhalb der ursprünglichen geöffnet und die Elemente werden auf der linken Seite ausgerichtet, aber ich möchte, dass sie an der Mitte der Navigationsleiste ausgerichtet sind.

P. S.: Hier möchte ich die nav-items zuerst rechts ausgerichtet werden, wenn es nicht zusammengebrochen ist, aber ich möchte, dass sie in der Mitte ausgerichtet sind, wenn sie zusammenfallen. Jede Hilfe wäre willkommen. Vielen Dank.

Quelle

2016-08-07 VatsalSura

aus dem Code Ich sehe alles, was Sie brauchen, ist in Text-align: center; in der Medienabfrage. Was funktioniert nicht? –

Überprüfen Sie, welche Klasse auf die minimierten Elemente angewendet wird, und legen Sie 'text-align: center;' für die zusätzliche Klasse fest, die angewendet wird. – Vandesh

@MadalinaTaina Wie kann ich das erreichen? Ich bin wirklich neu, also weiß ich nicht, was ich tun soll. Kannst du mir zeigen, wie das geht? – VatsalSura

können Sie versuchen Sie die folgende CSS hinzufügen:

.navbar-collapse.collapse.in ul{ 
    text-align: center; 
}

die .in Klasse wird von Bootstrap hinzugefügt, wenn un-Kollabieren des nav igung. Stellen Sie außerdem sicher, dass liinline oder inline-block angezeigt werden.

EDIT 1: Ich denke, sein, weil die navbar-right Klasse in ul

.navbar-collapse.collapse.in ul.nav{ 
    text-align: center !important; // Try to remove the important part. 
}

Können Sie auch, Entwickler-Tools überprüfen, um zu überprüfen, ob die Klassen korrekt sind und der Stil overiden wird oder nicht?

Edit 2:

diese zu Ihrem CSS hinzufügen:

.navbar-collapse.collapse.in ul{ 
    text-align: center; 
    vertical-align: middle; 
} 
.nav-pills>li { 
    float: none; 
    display: inline-block; 
}

Quelle

2016-08-07 12:49:53 ankitjain11

Nein. Hat nicht funktioniert. Gleiche Ergebnisse. – VatsalSura

Kannst du eine Geige spielen? – ankitjain11

[hier] (https://jsfiddle.net/64wfmvc8/1/#&togetherjs=41LC22trFw) – VatsalSura

Wenn Sie Ihre Website vollständig ansprechbar machen, dann sollten Sie verschiedene CSS-Regeln für verschiedene Bildschirmgrößen schreiben ...

/* Smartphones (portrait and landscape) ----------- */ 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 

@media only screen and (min-width : 321px) { 
/* Styles */ 
} 


/* iPads (landscape) ----------- */ 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 

@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
}

für weitere Informationen zu dieser Frage finden: CSS media queries for screen sizes

Quelle

2016-08-07 12:48:18

Center Richten Sie die Navigationsleiste aus, nachdem die Bildschirmgröße reduziert und die Taste gedrückt wurde.

Antwort

Verwandte Themen