【问题标题】:Center NavBar Text [duplicate]中心导航栏文本 [重复]
【发布时间】:2021-10-18 02:08:47
【问题描述】:

我试图将导航栏文本居中,但失败了。我尝试了很多不同的方法,但仍然无法奏效。

我的CSS

.navBar {
    background-color: #333;
    overflow: hidden;
    position: relative;
}

.navBar a {
  float: left;
  text-align: center;
  color: #f2f2f2;
  padding: 14px 14px;
  text-decoration: none;
  font-size: 16px;
}

我的HTML

<nav>
    <div class="navBar">
        <a class="active" href="Main.html"> Main</a>   
        <a href="Menu.html"> Menu</a>
        <a href="Events.html"> Events</a>    
    </nav>
</div>

【问题讨论】:

    标签: html css navbar


    【解决方案1】:

    您可以使用flexbox 将文本居中为:

    .navBar {
      ...
      display: flex;
      justify-content: center;
    }
    

    .navBar {
      background-color: #333;
      overflow: hidden;
      position: relative;
      display: flex;
      justify-content: center;
    }
    
    .navBar a {
      float: left;
      text-align: center;
      color: #f2f2f2;
      padding: 14px 14px;
      text-decoration: none;
      font-size: 16px;
    }
        <nav>
          <div class="navBar">
            <a class="active" href="Main.html"> Main</a>
            <a href="Menu.html"> Menu</a>
            <a href="Events.html"> Events</a>
        </nav>

    【讨论】:

    • 完美,谢谢。
    【解决方案2】:

    你想要这样的东西吗?

    .navBar {
     display: flex;
     justify-content: center;
    }
    
    .navBar a {
      padding: 4px 8px;
    }
    <nav>
        <div class="navBar">
        <a class="active" href="Main.html"> Main</a>   
        <a href="Menu.html"> Menu</a>
        <a href="Events.html"> Events</a>    
        </div>
    </nav>

    【讨论】:

      【解决方案3】:
      .navBar a {
       display: inline-block;
      }
      

      【讨论】:

        猜你喜欢
        • 2015-03-24
        • 2021-12-21
        • 1970-01-01
        • 2017-02-18
        • 1970-01-01
        • 1970-01-01
        • 2021-06-24
        • 1970-01-01
        相关资源
        最近更新 更多