CSS, wie Tasten vertikal in der Navigationsleiste vertikal ausgerichtet werden. Ausrichtung zentriert funktioniert nicht

Ich habe mich gefragt, wie man Schaltflächen in meiner Navigationsleiste vertikal zentriert. Im Moment sehen sie aus wie this und ich möchte, dass sie zentriert sind. Hier ist mein HTML-Code:CSS, wie Tasten vertikal in der Navigationsleiste vertikal ausgerichtet werden. Ausrichtung zentriert funktioniert nicht

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="description" content="Brian Eversole site"> 
    <title>Brian Eversole</title> 
    <link type="text/css" href="stylesheet3.css" rel="stylesheet"> 
</head> 
<body> 
    <nav> 
     <ul> 
      <li><a href="indextest.html">Home</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="contactus.html">Contact Us</a></li> 
     </ul> 
    </nav> 
</body> 
</html>

Hier ist mein CSS-Code:

/*CSS Reset*/ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 

} 

nav a { 
    text-decoration: none; 
    color: red; 
    display: inline; 
    font-size: 2em; 
    border: black 1px solid; 
    border-radius: .2em; 
    padding: .01em; 
} 

nav li { 
    display: inline; 
    padding: .5em; 

} 

nav ul { 
    background-color: green; 
    text-align: center; 
    vertical-align: center; 
    position: fixed; 
    width: 100%; 
    height: 3em; 

} 

a:hover { 
    color: black; 
    background-color: grey; 
    border: none; 
}

Jede Hilfe der Schaltflächen in den grünen Balken zu zentrieren würde geschätzt. Danke im Voraus!

Quelle

2017-04-11 Natan Garanto

entfernen Höhe von nav ul

nav ul { 
// height: 3em; 
}

machen li als inline-block

nav li { 
    display: inline-block; 
    vertical-align: top; //always use vertical align for inline-block element 
}

machen a Block

nav a { 
    display: block; 
}

, wenn Sie benutzerdefinierte Höhe von nav möchten, können Sie flex

verwenden

nav ul { 
    height: 5em; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

Quelle

2017-04-11 16:05:37 Lucian

Danke, ich werde Ihre Antwort als richtig in einer Sekunde markieren, aber zuerst habe ich ein paar Fragen. –

1) Was ist, wenn ich die Größe der Leiste ändern und zentrieren möchte? –

2) Warum sollte ich vertikal ausrichten: oben statt vertikal ausrichten: Mitte? 3) Kannst du bitte erklären, was jeder von ihnen tut, damit ich verstehe, warum das funktioniert? –

CSS, wie Tasten vertikal in der Navigationsleiste vertikal ausgerichtet werden. Ausrichtung zentriert funktioniert nicht

Antwort

Verwandte Themen