如何使用自舉將我的導航欄文本居中？

Q1如何使用自舉將我的導航欄文本居中？

我在想，如果我想使用中心引導我用什麼樣的代碼導航欄上的文字。我曾嘗試使用center-block。但是，這並不適合我。這是我想要中心的文本<h1 class="nav-title centre-block">Liam Docherty's Digital Portfolio</h1>。

站點代碼

<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>

來源

2017-04-01 AJKCJDC

要做到這一點，你需要使用一些技巧。首先，你需要給你的標誌寬度和高度。然後，我在brand section中有兩個<h5 class="nav-title text-center center-block">Liam Docherty's Digital Portfolio</h5></div>之一，主要nav-navbar ul之一。對於nav-navbar ul我已使用hidden-xs將其隱藏在小屏幕中，對於brand section我已使用hidden-sm hidden-lg hidden-md，因此它對於屏幕寬度超過767px的所有設備都保持隱藏狀態。

這種使用後，以下css--

#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%); 
} 
}

#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%; 
 
     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; 
 
     }

<!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"> 
 
       <li><h5 class="nav-title text-center center-block hidden-xs ">Liam Docherty's Digital Portfolio</h5></li> 
 
       </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>

希望這有助於！

來源

2017-04-02 01:54:24 neophyte

感謝您的詳細解釋和幫助！如果我在不影響導航欄文本的情況下懸停在「Liam的數字作品集」上，我將如何刪除下劃線？我怎樣才能使文本向下移動文本，以便它符合導航欄網頁文本？ – AJKCJDC

將「vertical-align：middle」添加到li中，並刪除從此元素添加到其他li元素的li樣式。那會做。 – neophyte

剛剛嘗試過，似乎沒有工作？ – AJKCJDC

如何使用自舉將我的導航欄文本居中？

回答

相關問題