So zentrieren Sie den Text vertikal innerhalb des Bootstrap-Containers

Ich versuche Text vertikal innerhalb eines div-Bootstrap-Containers zu zentrieren. Das ist meine Beispiel-HTML-Datei:So zentrieren Sie den Text vertikal innerhalb des Bootstrap-Containers

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<style> 
.vcenter { 
display: inline-block; 
vertical-align: middle; 
float:none; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
    <nav class="navbar navbar-default vcenter "> 

    <ul class="list-inline vcenter" > 
    <li class="menuFont"><a href="/">Menu 1</a></li> 
    <li class="menuFont "><a href="/Menu 2">Menu 2</a></li> 
    <li class="menuFont "><a href="/Menu 2">Menu 3</a></li> 
    <li class="menuFont "><a href="/Menu 2">Menu 4</a></li> 
    <li class="menuFont "><a href="/Menu 2">Menu 5</a></li> 
    <li class="menuFont "><a href="/Menu 2">Menu 6</a></li> 
    <li class="menuFont "><a href="/Menu 2">Menu 7</a></li> 
    </ul> 
</nav> 
</div> 
</body> 
</html>

ich das Menü Text innerhalb des Containers vertikal zentriert haben möchte, aber sie umarmen die Spitze. Wie würde ich das tun?

ich auf dieser letzten Nacht gearbeitet und das ist, was ich kam mit:

Mein Ziel mit Bootstrap wurde horizontal über die Seite eine Reihe von Menü-Links zu laufen haben. Aus irgendeinem Grund, zweifellos aufgrund meiner Ignoranz, erwies sich das als ziemlich schwierig. Ich habe eine Lösung gefunden. Zumindest scheint das zu funktionieren, OK. Um jedoch die horizontalen Menüelemente vertikal im Container zentriert erscheinen zu lassen, musste ich der Klassenansicht margin-top: 3px hinzufügen. Das fühlt sich für mich irgendwie falsch an, aber was auch immer funktioniert funktioniert, denke ich. Irgendwelche Kommentare werden geschätzt.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>TEST</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> 

<style> 
.view { 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
    margin-top: 3px; 
} 
</style> 
</head> 
<body> 
    <div class="container"> 
     <div class="Jumbotron"> 
      <h1 class="text-primary text-center">Using Bookstreap.js</h1> 
      <hr> 
     </div> 
     <nav class="navbar navbar-default view "> 
      <div class="container-fluid view"> 
      <div class="row"> 
      <div class="col-lg-10 col-lg-offset-10 view" > 
      <ul class="list-inline view" > 
       <li class="view"><a href="/">Menu 1</a></li> 
       <li class="view"><a href="/Menu1">Menu 1</a></li> 
       <li class="view"><a href="/Menu1">Menu 2</a></li></li> 
       <li class="view"><a href="/Menu1">Menu 3</a></li> 
       <li class="view"><a href="/Menu1">Menu 4</a></li> 
       <li class="view"><a href="/Menu1">Menu 5</a></li> 
       <li class="view"><a href="/Menu1">Menu 6</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 
     </nav> 
    <div>

Quelle

2016-07-29 Ron

Haben Sie den Text wollen vertikal in der nav zentriert werden? oder Nav vertikal zentriert im Container? – Shank

Ich möchte den Text vertikal innerhalb des Nav zentriert. – Ron

Wenn Sie nur versuchen, Ihre Links vertikal zu zentrieren, ändern Sie Ihre 'ul' von' list-inline vcenter' in die Standardklassen 'nav navbar-nav'. Siehe [Navbar] (https://getbootstrap.com/components/#navbar-default). – vanburen

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<style> 
{ 
display: inline-block; 
vertical-align: middle; 
float:none; 



} 
</style> 
</head> 
<body> 
<div class="container"> 
    <nav class="navbar navbar-default vcenter " > 
     <div class="container-fluid vcenter"> 
     <div class="col-lg-5 col-lg-offset-5" > 
    <ul class="list-inline vcenter" > 

    <div> 

    <li class="menuFont"><a href="/">Menu 1</a></li> 
    <li class="menuFont "><a href="/Menu 2">Menu 2</a></li> 
    <li class="menuFont "><a href="/Menu 2">Menu 3</a></li> 
    <li class="menuFont "><a href="/Menu 2">Menu 4</a></li> 
    <li class="menuFont "><a href="/Menu 2">Menu 5</a></li> 
    <li class="menuFont "><a href="/Menu 2">Menu 6</a></li> 
    <li class="menuFont "><a href="/Menu 2">Menu 7</a></li> 
    <div> 
    </ul> 
    </div> 


</div> 
</nav> 
</div> 
</body> 
</html>

Quelle

2016-07-29 18:46:19

Siehe meinen obigen Kommentar (Ich möchte die Menüpunkte vertikal zentriert innerhalb des Nav) ABER ein anderer Kommentar: Ich dachte von den Bootstrap.css Kommentaren, dass die zwei Arten von Containern nicht geschachtelt werden konnten. Versteh ich das nicht richtig? – Ron

ok ich bekomme es mich bearbeiten lassen. –

das ist alles, was ich verstanden habe, überprüfen Sie die neue Bearbeitung –

So zentrieren Sie den Text vertikal innerhalb des Bootstrap-Containers

Antwort

Verwandte Themen