Bootstrap NavBar zentrieren

[bootstrapjunkie]

Hallo Boarders,
ich bastel gerade an einem Template mit Bootstrap. Es klappt soweit ganz gut. Nun habe ich das Problem, daß die Buttons der Navbar linksbündig sind. Wie kann ich diese zentrieren? In der HTML Datei habe ich vor das Menü einfach mal <center></center> geschrieben. Das hat leider den Effekt, dass die Seite auf Smartphones verschoben angezeigt wird. Habe schon die Glasgoogle gefragt aber die Antwort noch nicht gefunden. Auch in der Bootstrap Dokumentation bin ich noch nicht fündig geworden.

<nav class="navigation" role="navigation">menuinhalt </nav>

.navigation {
	padding: 5px 0;
	border-top: 1px solid rgba(0,0,0,0.075);
	border-bottom: 1px solid rgba(0,0,0,0.075);
	margin-bottom: 10px;
}
.navigation .nav-pills {
	margin-bottom: 0;
}

Vielen Dank schonmal für die Antworten.

 

[Jan-Frederik Stieler]

Hi,

<center></center>

ist als depricated eingestuft, also bitte nicht mehr verwenden.

Das Beispiel ist zwar noch für Bootstrap 2.0, sollte aber auch in 3.0 funktionieren.

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      <li>1.</li>
      <li>2.</li>
    </ul>
  </div>
</div>

.navbar-inner {
    text-align: center;
}
.nav {
    float: none;
    display:inline-block;
}

Der IE hat aber etwas Probleme mit inline-block.
Die andere Möglichkeit wäre nav eine feste Breite zuzuweisen und dann margin: 0 auto; verwenden.

Viele Grüße

 

[CPoly]

Der IE hat aber etwas Probleme mit inline-block.

Das betrifft nur IE < 8, welche von Bootstrap 3 ohnehin nicht unterstützt werden. http://getbootstrap.com/getting-started/#browsers