Span 标签拒绝将自己与旁边的徽标居中

时间：2021-05-29 04:13:04

标签： javascript html css navbar centering

我需要将 span 标签均匀地放在它旁边徽标的中间，但我似乎无法弄清楚我需要什么才能发生这种情况。

代码如下：

/** global elements styling**/

@import "https://fonts.googleapis.com/css?family=Poppins:400";
* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

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

span {
  font-family: "Poppins", sans-serif;
  float: none;
  position: relative;
}


/**global classes styling**/


/** nav takes care of ul and li font-family**/

nav {
  font-family: "Poppins", sans-serif;
  width: 100%;
  height: 80px;
  position: fixed;
  box-sizing: border-box;
  align-items: center;
  min-height: 8vh;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  background-color: #23bebe;
}

nav a {
  font-family: "Poppins", sans-serif;
  text-decoration: none;
}

#nav-bar {
  top: 0;
  position: fixed;
  width: 100%;
}

#header {
  margin: 0;
  padding: 0px;
  display: flex;
  justify-content: space-between;
}

ul {
  display: inline-block;
  flex-direction: row;
  margin-right: 50px;
  margin-bottom: 20px;
  margin-top: 25px;
  letter-spacing: 5px;
  word-spacing: 10px;
  justify-content: space-between;
}

li {
  list-style: none;
  text-decoration: none;
  margin-left: 10px;
  display: inline-block;
  justify-content: space-between;
  position: relative;
}

.logo {
  margin: 10px 8px auto;
  margin-top: 10px;
  padding-top: 10px;
  padding-left: 20px;
}
<!DOCTYPE html>

<head lang="eng">
  <meta charset="UTF-8">
  <meta name="viewport">
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <title>Drums Company</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400">
</head>

<body>
  <div class="aligned-container">
    <header id="header">
      <!--needs to be id="nav-bar"-->
      <nav id="nav-bar">
        <div class="logo"><img src="https://img.icons8.com/windows/50/000000/drum-set.png" alt="drum set"><span>Drums Company</span>
        </div>

        <div class="nav-container">
          <ul>
            <li><a href="#home" class="nav-link">Home</a></li>
            <li><a href="#about" class="nav-link">About</a></li>
            <li><a href="#products" class="nav-link">Products</a></li>
            <li><a href="#contact" class="nav-link">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>


  </div>
</body>

/** global elements styling**/

@import "https://fonts.googleapis.com/css?family=Poppins:400";
* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

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

span {
  font-family: "Poppins", sans-serif;
  float: none;
  position: relative;
}


/**global classes styling**/


/** nav takes care of ul and li font-family**/

nav {
  font-family: "Poppins", sans-serif;
  width: 100%;
  height: 80px;
  position: fixed;
  box-sizing: border-box;
  align-items: center;
  min-height: 8vh;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  background-color: #23bebe;
}

nav a {
  font-family: "Poppins", sans-serif;
  text-decoration: none;
}

#nav-bar {
  top: 0;
  position: fixed;
  width: 100%;
}

#header {
  margin: 0;
  padding: 0px;
  display: flex;
  justify-content: space-between;
}

ul {
  display: inline-block;
  flex-direction: row;
  margin-right: 50px;
  margin-bottom: 20px;
  margin-top: 25px;
  letter-spacing: 5px;
  word-spacing: 10px;
  justify-content: space-between;
}

li {
  list-style: none;
  text-decoration: none;
  margin-left: 10px;
  display: inline-block;
  justify-content: space-between;
  position: relative;
}

.logo {
  margin: 10px 8px auto;
  margin-top: 10px;
  padding-top: 10px;
  padding-left: 20px;
}

请帮忙！！ :)

1 个答案:

答案 0 :(得分：0)

将此添加到您的 CSS：

.logo img {
  vertical-align: middle;
}

工作：

/** global elements styling**/

@import "https://fonts.googleapis.com/css?family=Poppins:400";
* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

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

span {
  font-family: "Poppins", sans-serif;
  float: none;
  position: relative;
}


/**global classes styling**/


/** nav takes care of ul and li font-family**/

nav {
  font-family: "Poppins", sans-serif;
  width: 100%;
  height: 80px;
  position: fixed;
  box-sizing: border-box;
  align-items: center;
  min-height: 8vh;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  background-color: #23bebe;
}

nav a {
  font-family: "Poppins", sans-serif;
  text-decoration: none;
}

#nav-bar {
  top: 0;
  position: fixed;
  width: 100%;
}

#header {
  margin: 0;
  padding: 0px;
  display: flex;
  justify-content: space-between;
}

ul {
  display: inline-block;
  flex-direction: row;
  margin-right: 50px;
  margin-bottom: 20px;
  margin-top: 25px;
  letter-spacing: 5px;
  word-spacing: 10px;
  justify-content: space-between;
}

li {
  list-style: none;
  text-decoration: none;
  margin-left: 10px;
  display: inline-block;
  justify-content: space-between;
  position: relative;
}

.logo {
  margin: 10px 8px auto;
  margin-top: 10px;
  padding-top: 10px;
  padding-left: 20px;
}

.logo img {
  vertical-align: middle;
}
<!DOCTYPE html>

<head lang="eng">
  <meta charset="UTF-8">
  <meta name="viewport">
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <title>Drums Company</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400">
</head>

<body>
  <div class="aligned-container">
    <header id="header">
      <!--needs to be id="nav-bar"-->
      <nav id="nav-bar">
        <div class="logo"><img src="https://img.icons8.com/windows/50/000000/drum-set.png" alt="drum set"><span>Drums Company</span>
        </div>

        <div class="nav-container">
          <ul>
            <li><a href="#home" class="nav-link">Home</a></li>
            <li><a href="#about" class="nav-link">About</a></li>
            <li><a href="#products" class="nav-link">Products</a></li>
            <li><a href="#contact" class="nav-link">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>


  </div>
</body>

相关问题
最新问题