时间戳

首页 > 解决方案 > 如何将徽标和导航水平居中在同一行上？

html - 如何将徽标和导航水平居中在同一行上？

问题描述

HTML/CSS 新手，我目前最大的困难是创建带有徽标的导航栏。我正在设置一个水平导航栏，其徽标图像位于导航左侧。我想要网站中心的导航和图像。我的导航没有完全居中，我的徽标偏向右侧，并且没有与导航链接对齐。

我试过flex,float和margin, 但没有任何运气。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #000;
  color: #fff;
  font-family: 'Barlow', sans-serif;
}

header {
  color: white;
  background-color: black;
  padding: 25px 0 25px 0;
}


/* Navigation */

.main-logo {}

.main-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.main-nav ul {
  display: flex;
  justify-content: space-around;
  width: 40%;
  list-style: none;
}

.main-nav a {
  color: #fff;
  width: 100px;
  padding: 0;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}

.main-nav li {
  float: left;
  margin-top: 15px;
  padding: 0;
}


/* Links */

a:hover {
  color: #a8a8a8;
}

body a:visited {
  color: #fff;
}

.intro-content {
  padding-top: 170px;
  height: 850px;
  background: linear-gradient(red, transparent 90%), linear-gradient(0deg, #000, transparent), #ffa949 url('img/header-bg.jpg') no-repeat center;
  background-size: cover;
}

.intro-content h1 {
  color: white;
  font-size: 3.25rem;
  /* 26px/16px */
  letter-spacing: .065em;
  font-weight: 200;
  padding: 75px 0 5px 0;
}

.main-content,
.intro-content,
.main-footer {
  text-align: center;
}

.main-content {
  padding-top: 25px;
  padding-bottom: 95px;
}

.secondary-content {
  text-align: center;
  padding-top: 80px;
  padding-bottom: 70px;
  border-bottom: 2px solid #dfe2e6;
}

.socialmedia {
  text-align: center;
  margin: 50px 0 20px 0;
}

.socialmedia a {
  margin: 0 25px 0 25px;
  color: white;
  font-size: 1.5rem;
}

.main-footer {
  margin-bottom: 50px;
}

.t-border {
  border-top: 2px solid #dfe2e6;
}


/* Layout */

.main-content,
.secondary-content {
  width: 75%;
  padding-left: 25px;
  padding-right: 25px;
  margin: auto;
  max-width: 960px;
}


/* Floats */

.article1,
.article2 {
  width: 40%;
}

.article2 {
  float: left;
}

.article1 {
  float: right;
}


/* Float Clearfix */

.group:after {
  content: "";
  display: table;
  clear: both;
}
<DOCTYPE! html>
  <html lang="en-US" dir="ltr">

  <head>
    <meta name="viewport" content="width=device-width">
    <meta charset="UTF-utf-8">
    <title>100 Thieves | Home</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Barlow&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/ab11039b93.js"></script>
  </head>

  <body>
    <header>
      <div class="main-logo">
        <a href="index.html"><img src="Img/100Thieves.png" alt="100 Thieves Logo"></a>
      </div>

      <div class="main-nav">
        <nav>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Store</a></li>
            <li><a href="#">Teams</a></li>
            <li><a href="#">Partners</a></li>
            <li><a href="#">Careers</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <div class="intro-content">
      <h1>Take What's Not Given</h1>
      <p>The words of Matt "Nadeshot" Haag and the official 100 Thieves motto</p>
    </div>

    <div class="main-content">

      <div class="about">
        <h2>About 100 Thieves</h2>
        <p>100 Thieves is a new gaming lifestyle company and eSports organization built at the intersection of competitive gaming, entertainment, and apparel. 100 Thieves was founded in 2017 by Matt "Nadeshot" Haag, the former Optic Gaming Call of Duty captain,
          X Games gold medalist, and 2014 eSports athlete of the year. After retiring from competitive play, Matt went on to build some of the most popular gaming channels on twitch and youtube, and then founded 100 Thieves as a creative outlet for his
          passions in competitive gaming, storytelling, and streetwear. The company currently competes in professional League of Legends, Call of Duty, Fortnite and Apex Legends.
        </p>
      </div>

      <div class="cashapp">
        <h2>About Cash App</h2>
        <p>Cash App is the money app. It's the easiest way to pay people back—friends, family, coworkers—anyone, really. Sending and receiving money is totally free and fast, and most payments can be deposited directly to your bank account in just a few
          seconds. With cash app, you can also buy and sell bitcoin instantly, get a paycheck deposited right to the app, or create a unique $cashtag that you can share with anyone to get paid fast. You can even use the free cash card to spend the money
          you keep in the app anywhere you like. Customize your card with a laser-etching and add a boost from the app to instantly save at some of your favorite places whenever you swipe.
          <a href="http://www.cash.app/download">Download</a> cash app for free.
        </p>
      </div>

    </div>

    <div class="secondary-content t-border group">

      <div class="article1">
        <img src="Img/win.png" alt="100 Thieves wins at CWL London">
        <h2>Big Win at CWL London</h2>
        <p>100 Thieves won their first ever Call of Duty eSports title on May 5, 2019. After knocking out top teams like Envy, Team Heretics, and Team Reciprocity, and sweeping OpTic Gaming aside with ease, 100 Thieves was matched against eUnited. It was
          a close fought affair all through the match, and with both teams mere seconds away from claiming victory, 100 Thieves managed to hold on to the point and won the final map 250-238.
          <p><a href="https://www.gamesradar.com/cwl-london-2019-recap-winner/">Read more...</a></p>
      </div>

      <div class="article2">
        <img src="Img/franchise.png" alt="100 Thieves gunning for the Los Angeles franchise">
        <h2>Gunning the Los Angeles Franchise</h2>
        <p>One of the most sought after spots in the competition is the Los Angeles franchise, and according to reports 100 Thieves are hoping to raise more money in the hopes of locking down the California position. If successful, it’s believed that 100
          Thieves would be the sole team based in Los Angeles in the Call of Duty franchise league, an ideal situation as the team’s headquarters and LCS teams are both based in the city.</p>
        <p><a href="https://www.dexerto.com/call-of-duty/100-thieves-reportedly-raising-25-million-for-call-of-duty-franchise-spot-675708">Read more...</a></p>
      </div>
    </div>

    <div class="socialmedia">
      <h3>Follow 100 Thieves</h3>
      <a href="https://twitter.com/100Thieves"><i class="fab fa-twitter"></i></a>
      <a href="http://instagram.com/100thieves"><i class="fab fa-instagram"></i></a>
      <a href="https://www.youtube.com/100thieves"><i class="fab fa-youtube"></i></a>
      <a href="https://www.twitch.tv/team/100thieves"><i class="fab fa-twitch"></i></a>
    </div>

    <div class="main-footer">
      <footer>
        &copy; 100 Thieves, LLC 2019
      </footer>
    </div>
  </body>

  </html>

标签： htmlcss

解决方案

在我添加属性以使您的导航向右对齐并从中删除属性之后，我在您的标题标记中添加了display: flexCSS 属性以内联您的导航和徽标margin-left: automargin-topli

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #000;
  color: #fff;
  font-family: 'Barlow', sans-serif;
}

header {
  color: white;
  background-color: black;
  padding: 25px 0 25px 0;
  display: flex;
}

/* Navigation */

.main-logo {

}

.main-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;
}

.main-nav ul {
  display: flex;
  justify-content: space-around;
  width: 40%;
  list-style: none;
}

.main-nav a {
  color: #fff;
  width: 100px;
  padding: 0;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}

.main-nav li {
  float: left;
  padding: 0;
}

/* Links */

a:hover {
  color: #a8a8a8;
}

body a:visited {
  color: #fff;
}

.intro-content {
  padding-top: 170px;
  height: 850px;
  background: linear-gradient(red, transparent 90%),
              linear-gradient(0deg, #000, transparent),
              #ffa949 url('img/header-bg.jpg') no-repeat center;

  background-size: cover;
}

.intro-content h1 {
  color: white;
  font-size: 3.25rem; /* 26px/16px */
  letter-spacing: .065em;
  font-weight: 200;
  padding: 75px 0 5px 0;
}

.main-content,
.intro-content,
.main-footer {
  text-align: center;
}

.main-content {
    padding-top: 25px;
  padding-bottom: 95px;
}

.secondary-content {
  text-align: center;
    padding-top: 80px;
    padding-bottom: 70px;
  border-bottom: 2px solid #dfe2e6;
}

.socialmedia {
  text-align: center;
  margin: 50px 0 20px 0;
}

.socialmedia a {
  margin: 0 25px 0 25px;
  color: white;
  font-size: 1.5rem;
}

.main-footer {
  margin-bottom: 50px;
}

.t-border {
  border-top: 2px solid #dfe2e6;
}

/* Layout */

.main-content,
.secondary-content {
  width: 75%;
  padding-left: 25px;
  padding-right: 25px;
  margin: auto;
  max-width: 960px;
}

/* Floats */

.article1,
.article2 {
  width: 40%;
}

.article2 {
  float: left;
}

.article1 {
  float: right;
}

/* Float Clearfix */

.group:after {
  content: "";
  display: table;
  clear: both;
}
<DOCTYPE! html>
<html lang="en-US" dir="ltr">
    <head>
        <meta name="viewport" content="width=device-width">
        <meta charset="UTF-utf-8">
        <title>100 Thieves | Home</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Barlow&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/ab11039b93.js"></script>
    </head>
    <body>
        <header>
            <div class="main-logo">
                <a href="index.html"><img src="Img/100Thieves.png" alt="100 Thieves Logo"></a>
            </div>

            <div class="main-nav">
                <nav>
                    <ul>
                      <li><a href="#">About</a></li>
                      <li><a href="#">Store</a></li>
                      <li><a href="#">Teams</a></li>
                      <li><a href="#">Partners</a></li>
                      <li><a href="#">Careers</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <div class="intro-content">
            <h1>Take What's Not Given</h1>
            <p>The words of Matt "Nadeshot" Haag and the official 100 Thieves motto</p>
        </div>

        <div class="main-content">

          <div class="about">
            <h2>About 100 Thieves</h2>
            <p>100 Thieves is a new gaming lifestyle company and eSports organization built at the intersection of competitive gaming, entertainment, and apparel. 100 Thieves was founded in 2017 by Matt "Nadeshot" Haag, the former Optic Gaming Call of Duty captain, X Games gold medalist, and 2014 eSports athlete of the year.
            After retiring from competitive play, Matt went on to build some of the most popular gaming channels on twitch and youtube, and then founded 100 Thieves as a creative outlet for his passions in competitive gaming, storytelling, and streetwear. The company currently competes in professional League of Legends, Call of Duty, Fortnite and Apex Legends.
            </p>
          </div>

          <div class="cashapp">
            <h2>About Cash App</h2>
            <p>Cash App is the money app. It's the easiest way to pay people back—friends, family, coworkers—anyone, really. Sending and receiving money is totally free and fast, and most payments can be deposited directly to your bank account in just a few seconds. With cash app, you can also buy and sell bitcoin instantly, get a paycheck deposited right to the app, or create a unique $cashtag that you can share with anyone to get paid fast. You can even use the free cash card to spend the money you keep in the app anywhere you like. Customize your card with a laser-etching and add a boost from the app to instantly save at some of your favorite places whenever you swipe.
            <a href="http://www.cash.app/download">Download</a> cash app for free.
            </p>
          </div>

        </div>

        <div class="secondary-content t-border group">

          <div class="article1">
            <img src="Img/win.png" alt="100 Thieves wins at CWL London">
            <h2>Big Win at CWL London</h2>
            <p>100 Thieves won their first ever Call of Duty eSports title on May 5, 2019. After knocking out top teams like Envy, Team Heretics, and Team Reciprocity, and sweeping OpTic Gaming aside with ease, 100 Thieves was matched against eUnited. It was a close fought affair all through the match, and with both teams mere seconds away from claiming victory, 100 Thieves managed to hold on to the point and won the final map 250-238.
            <p><a href="https://www.gamesradar.com/cwl-london-2019-recap-winner/">Read more...</a></p>
          </div>

          <div class="article2">
            <img src="Img/franchise.png" alt="100 Thieves gunning for the Los Angeles franchise">
            <h2>Gunning the Los Angeles Franchise</h2>
            <p>One of the most sought after spots in the competition is the Los Angeles franchise, and according to reports 100 Thieves are hoping to raise more money in the hopes of locking down the California position. If successful, it’s believed that 100 Thieves would be the sole team based in Los Angeles in the Call of Duty franchise league, an ideal situation as the team’s headquarters and LCS teams are both based in the city.</p>
            <p><a href="https://www.dexerto.com/call-of-duty/100-thieves-reportedly-raising-25-million-for-call-of-duty-franchise-spot-675708">Read more...</a></p>
          </div>
        </div>

        <div class="socialmedia">
          <h3>Follow 100 Thieves</h3>
          <a href="https://twitter.com/100Thieves"><i class="fab fa-twitter"></i></a>
          <a href="http://instagram.com/100thieves"><i class="fab fa-instagram"></i></a>
          <a href="https://www.youtube.com/100thieves"><i class="fab fa-youtube"></i></a>
          <a href="https://www.twitch.tv/team/100thieves"><i class="fab fa-twitch"></i></a>
        </div>

      <div class="main-footer">
        <footer>
          &copy; 100 Thieves, LLC 2019
        </footer>
      </div>
    </body>
</html>

推荐阅读