Question

我无法在导航栏中居中对齐文本，当我居中时，它的行为几乎就像一个下拉菜单。我找不到原因。

此外，如果您可以提供帮助：我的社交媒体按钮都显示蓝色而不是CSS表格中的颜色。

这是我的代码：

<DOCTYPE! html>        
<html>        
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">        
  <head>       
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    
    <title>Home</title>
    <!--CSS Sheet-->
    <style>           
    h1 {
    font-size: 60;
    text-align: center;
    font-family: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
    }

    /* Top Navigation Bar*/
    .topnav {
    background-color: #666666;
    overflow: hidden;
    }
    .topnav a {
    font-family:  Rockwell, 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif;
    float: center;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 17px;
    }
    .topnav a:hover {
    background-color: #ddd;
    color: black;
    }
    .topnav .icon {
    display: none;
    }
    @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
    float: right;
    display: block;
    }
    }
    @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    }
    .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    }
    }
    /*Slideshow*/
    /* Slideshow container */
    .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    }
    /* Caption text */
    .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    }
    /* Number text (1/3 etc) */
    .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    }

    .active {
    background-color: #717171;
    }
    /* Fading animation */
    .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
    }

    @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
    }

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
    .text {font-size: 11px}
    }           
    /*Social Media Buttons*/
    .fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    }

    .fa:hover {
    opacity: 0.7;
    }

    .fa-facebook {
    background: #3B5998;
    color: white;
    }

    .fa-twitter {
    background: #55ACEE;
    color: white;
    }

    fa-youtube {
    background: #bb0000;
    color: white;
    }

    .fa-instagram {
    background: #125688;
    color: white;
    }

    .fa-snapchat-ghost {
    background: #fffc00;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }

    /*End of Social Media Buttons*/

    /*Footer*/
    </style>
  </head>
  <body>
    <br>
    <!--Title/Logo--><h1>Tavernier Tech</h1>
    <br>
    <!--Navigation Bar-->    
    <div class="topnav" id="myTopnav">    
      <a href="#home">Home</a>
      <a href="#articles">Articles</a>
      <a href="#news">Shop</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
    </div>

    <script>
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
        x.className += " responsive";
        } else {
        x.className = "topnav";
        }
      }
    </script>    

    <br>
    <!--Slideshow-->
    <div class="slideshow-container">
      <div class="mySlides fade">
        <div class="numbertext"></div>
        <img src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAATOAAAAJDE2NDQ3ZjkzLTljOTAtNDU2Mi04NGRlLTc5NWRkZTYwNzNlMQ.jpg" style="width:90%">
        <div class="text"></div>
      </div>
      <div class="mySlides fade">
        <div class="numbertext"></div>
        <img src="http://www.ntech.net.au/wp-content/uploads/2015/07/network-switch-ethernet.jpg" style="width:90%">
        <div class="text"></div>
      </div>
    </div>

    <br>
    <div style="text-align:center">
      <span class="dot"></span> 
      <span class="dot"></span> 
    </div>

    <script>
      var slideIndex = 0;
      showSlides();

      function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
        }
        slideIndex++;
        if (slideIndex> slides.length) {slideIndex = 1}    
        for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
        setTimeout(showSlides, 10000); // Change image every 10 seconds
      }
    </script>
    <!--Footer-->
    <footer class="">        
      <!--Social Media Buttons-->
      <a href="#" class="fa fa-facebook-official"></a>
      <a href="#" class="fa fa-twitter"></a>
      <a href="#" class="fa fa-instagram"></a>
      <a href="#" class="fa fa-youtube"></a>        
    </footer>
  </body>
</html>

Answer 1

您需要按如下方式更改css

添加text-align =＆＃34; center＆＃34;到.topnav，现在应该阅读

.topnav {
background-color: #666666;
overflow: hidden;text-align:center
}

从.topnav a，删除

float: center;
display: block;

所以它现在读取

.topnav a {
font-family:  Rockwell, 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif;
color: #f2f2f2;
text-align: center;
padding: 8px 16px;
text-decoration: none;
font-size: 17px;
}

这将使导航中的链接居中

要设置社交媒体链接的颜色，请在css中将以下内容添加到.fa

color:white;
background-color:#3B5998

所以它现在读取

.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;color:white;background-color:#3B5998
}

希望这有帮助

无法居中对齐导航栏中的文本

1 个答案: