Html, CSS vertikal ein Menü ausrichten

Ich versuche, ein Menü zu machen, aber ich habe Probleme, den Text in die Mitte zu zentrieren.Html, CSS vertikal ein Menü ausrichten

<div id="menucontainer"> 
      <ul id="menu"> 
       <li>@Html.ActionLink("Home", "Index", "Home")</li> | 
       <li>@Html.ActionLink("About", "About", "Home")</li> | 
       <li>@Html.ActionLink("Projects", "Projects", "Home")</li> | 
       <li>@Html.ActionLink("Forum", "Forum", "Home")</li> 
      </ul> 
     </div> 


#menu 
{ 
    background-image: url("../Content/img/bg-menu.png"); 
    height:50px; 
    padding-left:30px; 
    padding-right:25px; 
    text-align:center; 
    border-radius:20px; 
    background-repeat:repeat; 
    display:block; 
    list-style: none; 
    margin-left:55%; 
    position:absolute; 
    color:#aa4dc6; 
} 
#menu li 
{ 
    display:inline; 
    padding:5px 10px 9px 10px; 
} 
#menu a 
{ 
    text-decoration:none; 
    color:#606060; 
    text-decoration:none; 
    text-transform:capitalize; 
    font-size:19px; 
    font-weight:bold; 
    font-family: 'Open Sans', sans-serif; 
}

enter image description here

Quelle

2012-04-13 Reinard

Wenn die Höhe ausgerichtet werden von der Speisekarte ist eine konstante Sache, dann sollten Sie in der Lage sein, ein "padding-top" zu machen. http://coding.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/#CSS-Basics1 – Jared

@Jared #Menü li enthält Padding, aber die Erhöhung der oberen Polsterung ändert nichts. – Reinard

gibt ihm die gleichen line-height wie das Element des height und der Text sollte richtig

Quelle

2012-04-13 21:52:17

Diese Lösung hat vom Design her einen großen Nachteil. Sollte der Text zufällig umbrechen, wird das Layout komplett durchbrochen. –

Wenn der Text umbrochen werden soll - dann sollte es nicht vertikal ausgerichtet sein ... das ist für Fälle eines einzeiligen Textes, nicht für Absätze oder so –

Ich denke, es ist ein vernünftiger Vorschlag für etwas wie ein Menü, aber ich habe es gesehen Menüs, in denen der Text auch umgebrochen wird. Es ist eine gute Antwort, aber es lohnt sich, darauf zu achten, dass 'line-height' als Lösung vorgeschlagen wird. –

Es gibt ein paar Lösungen für dieses Problem.

Hier ist eine jsFiddle, die alle folgenden Lösungen zeigt.

Zuerst können Sie versuchen, die display-Eigenschaft auf table-cell für die Listenelemente im Menü festzulegen, und dann können Sie vertical-align:middle verwenden, um den Text zu zentrieren.

Die Lösung funktioniert wahrscheinlich gut, da Sie die Listenelemente nicht schweben lassen, sondern CSS verwenden können, damit sie sich wie Tabellenzellen verhalten.

ul#menu { 
    display: table-row; 
} 
ul#menu li { 
    display: table-cell; 
    vertical-align: middle; 
}

Zweitens können Sie die line-height Eigenschaft auf die Höhe der Listenposition gesetzt. obwohl Seien Sie vorsichtig mit dieser, weil, wenn der Text wickelt es das Layout brechen:

ul#menu li { 
    height: 30px; 
    line-height: 30px; 
}

Schließlich statt eine feste Höhe einstellen, können Sie padding verwenden, um die Höhe der Listenelemente zu setzen. Angenommen, Sie verwenden die gleiche Polsterung für oben und unten sollte der Text in der Mitte ausgerichtet werden:

ul#menu li { 
    padding: 15px 5px 15px 5px; 
}

Quelle

2012-04-13 21:50:20

Antwort

Verwandte Themen