0
Q1Wie kann ich meinen Navigationsleisten-Text mit Bootstrap zentrieren?
Ich habe mich gefragt, ob ich Text auf der Navigationsleiste mit Bootstrap welchen Code verwende ich zum Zentrum wollte. Ich habe versucht, center-block zu verwenden. Dies funktionierte jedoch nicht für mich. Dies ist der Text, den ich versuche zu zentrieren <h1 class="nav-title centre-block">Liam Docherty's Digital Portfolio</h1>.
Site code
<style>
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.section {
min-height: 100vh;
}
.one {
background-color: #FFFFFF;
}
.two {
background-color: #FFFFFF;
}
#sections .section {
padding-top: 50px;
}
.hero {
background: url("https://static.pexels.com/photos/38892/pexels-photo-38892.jpeg") center center no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 60%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 300px;
margin: auto;
padding: 3px;
width: 300px;
top: 15%;
left: 50%;
margin-left: -150px;
z-index: 10;
}
.fa-angle-down {
color: #0000;
bottom: 0px;
margin: 0 auto;
}
.fa-angle-up {
color: #0000;
bottom: 0px;
margin: 0 auto;
}
.s1-text {
text-align: center;
color: black;
z-index: 99;
font-size: 18pt;
}
.s2-text {
text-align: center;
color: black;
z-index: 99;
font-size: 18pt;
}
.nav-text {
font-size: 14pt;
}
</style><!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://i1126.photobucket.com/albums/l611/ldocherty1/logo1_zpsep8qps5m.png"><img src="http://i1126.photobucket.com/albums/l611/ldocherty1/logo1_zpsep8qps5m.png" alt="Logo design"></a>
<h1 class="nav-title centre-block">Liam Docherty's Digital Portfolio</h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Units <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Unit 6</a>
</li>
<li><a href="#section3">Unit 14</a>
</li>
<li><a href="#">Unit 7</a>
</li>
<li><a href="#">Unit 1</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">About Me</a>
</li>
<li><a href="#">CV</a>
</li>
<li><a href="#">Education</a>
</li>
</ul>
</li>
<li><a href="#contact-me">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="sections">
<div class="section one">
<div class="shape"></div>
<div class="hero"></div>
<h1 class="s1-text center-block">WELCOME TO MY</h1>
<h1 class="s2-text center-block">PORTFOLIO</h1>
<a href="#section two"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>
</div>
<section id="contact-me" class="section two">
<a href="#section one"> <i class="fa fa-angle-up" style="font-size:100px;"></i></a>
</div>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>
Danke für die ausführliche Erklärung und Hilfe! Wie würde ich die Unterstreichung entfernen, wenn ich über "Liams Digitalportfolio" schwebe, ohne den Text der Navigationsleiste zu beeinflussen? Wie würde ich auch machen, dass der Text den Text nach unten bewegt, so dass er mit dem Text der Navigationsleiste der Webseite übereinstimmt? – AJKCJDC
Fügen Sie der Li-Datei 'vertical-align: middle' hinzu und entfernen Sie den Li-Stil, den Sie anderen li-Elementen von diesem Element hinzugefügt haben. das wird tun. – neophyte
Nur versucht, das schien nicht zu funktionieren? – AJKCJDC