Wie zentriert man ein vertikal ausgerichtetes Menü in CSS?

Question

Hier ist der HTML-Code selbst

html { 
 
    background: url(wallpaper.jpg) no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 

 
.header { 
 
    text-align: center; 
 
    font-family: impact; 
 
    font-size: 40px; 
 
    margin-left: 500px; 
 
    margin-right: 500px; 
 
    color: gray; 
 
} 
 

 
#introduction { 
 
    font-family: times; 
 
    text-align: center; 
 
    text-decoration: underline; 
 
    color: #1F1B1B; 
 
} 
 

 
.paragraph { 
 
    text-indent: 20px; 
 
    color: gray; 
 
    text-align: center; 
 
    margin-left: 200px; 
 
    margin-right: 200px; 
 
} 
 

 
.rap { 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
ul li a { 
 
    display: block; 
 
    text-align: center; 
 
    font-family: georgia; 
 
    background: rgba(16, 16, 16, 0.4); 
 
    width: 130px; 
 
    text-decoration: none; 
 
    margin: 10px; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    color: white; 
 
    font-size: 19px; 
 
    vertical-align: middle; 
 
    list-style: none; 
 
}

<ul> 
 
    <li><a href="#2pac">2pac</a></li> 
 
    <li><a href="#Bigge Smalls">Biggie Smalls</a></li> 
 
    <li><a href="#Nas">Nas </a></li> 
 
    <li><a href="#Jay Z">Jay Z </a></li> 
 
    <li><a href="#T.I.">T.I.</a></li> 
 
</ul>

Was kann ich tun, um mein Menü selbst zu zentrieren? Es schwebt nach links und ich will das ganze Ding auf meiner falschen Webseite.

Answer 1

Ändern Sie die Verknüpfungen zu inline-block und weisen Sie dem übergeordneten Element text-align: center; zu, um die Verknüpfungen zu zentrieren, und entfernen Sie dann den Standard padding aus der ul, so dass alles genau in der Mitte zentriert ist.

ul { 
 
    text-align: center; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
ul li a { 
 
    display: block; 
 
    text-align: center; 
 
    font-family: georgia; 
 
    background: rgba(16, 16, 16, 0.4); 
 
    width: 130px; 
 
    text-decoration: none; 
 
    margin: 10px; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    color: white; 
 
    font-size: 19px; 
 
    vertical-align: middle; 
 
    list-style: none; 
 
    display: inline-block; 
 
}

<ul> 
 
    <li><a href="#2pac">2pac</a></li> 
 
    <li><a href="#Bigge Smalls">Biggie Smalls</a></li> 
 
    <li><a href="#Nas">Nas </a></li> 
 
    <li><a href="#Jay Z">Jay Z </a></li> 
 
    <li><a href="#T.I.">T.I.</a></li> 
 
</ul>

Answer 2

html { 
 
    background: url(wallpaper.jpg) no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 

 
.header { 
 
    text-align: center; 
 
    font-family: impact; 
 
    font-size: 40px; 
 
    margin-left: 500px; 
 
    margin-right: 500px; 
 
    color: gray; 
 
} 
 

 
#introduction { 
 
    font-family: times; 
 
    text-align: center; 
 
    text-decoration: underline; 
 
    color: #1F1B1B; 
 
} 
 

 
.paragraph { 
 
    text-indent: 20px; 
 
    color: gray; 
 
    text-align: center; 
 
    margin-left: 200px; 
 
    margin-right: 200px; 
 
} 
 

 
.rap { 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 
/**use text-align**/ 
 
ul li { 
 
    text-align: center; 
 
    list-style: none; 
 
    } 
 
ul li a { 
 
    display: inline-block; /*use inline-block display*/ 
 
    text-align: center; 
 
    font-family: georgia; 
 
    background: rgba(16, 16, 16, 0.4); 
 
    width: 130px; 
 
    text-decoration: none; 
 
    margin: 10px; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    color: white; 
 
    font-size: 19px; 
 
    vertical-align: middle; 
 
    list-style: none; 
 
}

<ul> 
 
    <li><a href="#2pac">2pac</a></li> 
 
    <li><a href="#Bigge Smalls">Biggie Smalls</a></li> 
 
    <li><a href="#Nas">Nas </a></li> 
 
    <li><a href="#Jay Z">Jay Z </a></li> 
 
    <li><a href="#T.I.">T.I.</a></li> 
 
</ul>

Answer 3

Ich persönlich liebe einen anderen Trick, schnell und einfach. Legen Sie es in einem div Container:

<div id = "menu"> 
    <ul> 
    <li><a href="#2pac">2pac</a></li> 
    <li><a href="#Bigge Smalls">Biggie Smalls</a></li> 
    <li><a href="#Nas">Nas </a></li> 
    <li><a href="#Jay Z">Jay Z </a></li> 
    <li><a href="#T.I.">T.I.</a></li> 
    </ul> 
</div> 

Dann geben Sie dem Menü eine feste Breite und verwenden Autopannen, wie folgt aus:

#menu { 
width: 1000px; 
margin-right: auto; 
margin-left: auto; 
} 

Oder Sie können die gleichen Stile auf der ul selbst verwenden.