Using bootstrap how can I put this text in the middle of the nav bar?
Question
How can I put the text <h5 class="nav-title text-center center-block hidden-sm hidden-md hidden-lg" id="nav-center">Liam Docherty's Digital Portfolio</h5> in the middle of the navigation bar so it in line with the other nav bar webpages text?
<style> #nav_a { width:25%; } #nav_img { width:100%; height: 30px; } @media (min-width: 768px) { .navbar-nav.navbar-center { position: absolute; left: 50%; transform: translatex(-50%); } } .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%; position: absolute; 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 id="nav_a" class="navbar-brand pull-left" href=""><img id="nav_img" class="img-responsive" src="http://i1126.photobucket.com/albums/l611/ldocherty1/logo1_zpsep8qps5m.png" alt="Logo design"></a> <h5 class="nav-title text-center center-block hidden-sm hidden-md hidden-lg" id="nav-center">Liam Docherty's Digital Portfolio</h5> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-center"> <h5 class="nav-title text-center center-block hidden-xs ">Liam Docherty's Digital Portfolio</h5> </ul> <ul class="nav navbar-nav navbar-right"> <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>
3 answers
solution1
0 2017-04-03 12:06:42
try,
.center-block {
display: block;
width: 100%;
position: absolute;
}
solution2
0 ACCPTED 2017-04-03 12:07:16
Add margin-top for centered horizontaly the text :)
.center-block {
display: block;
margin-right: auto;
**margin-top: 30px;**
margin-left: auto;
}
solution3
0 2017-04-03 12:17:03
只要把这个CSS
.navbar-header h5{line-height:30px}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I put a logo image in the middle of bootstrap fixed nav?
How can i put a glyphicon in nav with bootstrap?
How do I create a Nav bar using buttons or how can I change the font size of the text in my nav bar
How can I put a fixed logo in the nav bar at the top?
How can I put content to the right of my bootstrap nav
How can I change the text color of the nav bar text and center nav bar text?
How can I stop nav bar icons from disappearing when hovering over them? using bootstrap
bootstrap 3 brand name middle nav bar
Logo in middle of nav bar without bootstrap
How can I put my text and image in the middle of a div?
Related Tags