Text in einer horizontalen Navigationsleiste zentrieren

Ich möchte meinen Text in der Mitte der Navigationsleiste anzeigen. Ich habe versucht, vertikal auszurichten: Mitte oder Mitte, aber das hat nicht funktioniert.Text in einer horizontalen Navigationsleiste zentrieren

Hier ist, was ich habe:

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    height: 60px; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

Quelle

2017-02-28 Bayern

Wollen Sie den Text Mitte vertikal oder horizontal auszurichten? oder du willst nur, dass es in der Mitte des "Elternteils" ist. Du kannst 'line-height' verwenden. –

Um vertikal um den Text zu zentralisieren, Sie setzen müssen eine line-height gleich der Höhe des Elements. In diesem Fall ist es 60px:

li a { 
    height: 60px; 
    line-height: 60px; 
}

Hoffe, das hilft! :)

Quelle

2017-02-28 20:16:22

Ja, das ist es, danke! :) – Bayern

Stellen Sie die line-height Eigenschaft gleich die height Ihr Elements:

li a { 
    height: 60px; 
    line-height: 60px; 
}

Quelle

2017-02-28 20:16:22 Drown

Das tat es ja, danke! – Bayern

Wenn es für Sie getan wird, markieren Sie als Antwort die erste Antwort –

Verwenden Flexbox (display: flex), um den Text zu zentrieren. Es ist flexibler als line-height (height kann ein Prozentsatz sein) und hat eine gute Browser-Unterstützung. Siehe caniuse.com.

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    height: 60px; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

Quelle

2017-02-28 20:19:12

ich würde diese Antwort empfehlen, obwohl 'line-height' das gleiche tut aber immer noch' flex' ist besser –

würde ich nicht zustimmen, es ist eine sehr saubere Lösung aber hat weniger Unterstützung in älteren Browsern (insbesondere IE9-) wie auch von @Justin Taddei selbst gesagt – Evochrome

@Evochrome IE9 hat eine globale Nutzung von 0,27% nach [caniuse.com] (http://caniuse.com/#feat=flexbox)). Bemerkenswert, aber nicht wirklich ein großes Problem. –

.nav{ 
 
    border:1px solid #ccc; 
 
    border-width:1px 0; 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    text-align:center; 
 
    background-color: #333; 
 
} 
 
.nav li{ 
 
    display:inline; 
 
} 
 
.nav a{ 
 
    display:inline-block; 
 
    padding:10px; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    height: 22px; 
 
} 
 
li a:hover { 
 
    background-color: #111; 
 
}

<ul class="nav"> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

Quelle

2017-02-28 20:58:13

https://jsfiddle.net/matt1966/kwryh2v/4/ –

Hey Matt, willkommen in SO. Es ist großartig, dass Sie versuchen, Leuten zu helfen, ihren Code zu reparieren. Wenn Sie dies tun, ist es jedoch sehr hilfreich zu erklären, was Sie genau getan haben (könnte kurz sein). Machen Sie weiter so gute Arbeit und gute Programmierung :) – Evochrome

Die "Magie" im Code ist text-align: center; zusammen mit Anzeige: Inline-Block; Damit wird der Inhalt wie angefordert in das Zentrum des Divs gestellt. Es gibt auch die Möglichkeit, display zu verwenden: Inline-Block; mit Rand: 0 automatisch; auch. –

Text in einer horizontalen Navigationsleiste zentrieren

Antwort

Verwandte Themen