javascript - 跨度标签拒绝将其自身与旁边的徽标居中
问题描述
我需要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;
}
请帮忙!!:)
解决方案
将此添加到您的 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>
推荐阅读
- swift - Swift 生成 15 个随机数字
- pandas - 用变量命名 pandas 列
- amazon-web-services - 我的子域 ssl 证书与我的主域的 ssl 证书冲突
- angular - 如何以角度为管道和地图编写单元测试?
- php - 在 laravel 中使用模态搜索数据
- maven - 需要帮助设置 CI/CD - Selenium Grid - Java- Docker
- android - 如何解决此问题,APK 或 AAB 正在使用需要隐私政策的权限:(android.permission.CAMERA)
- javascript - 同时具有两个功能的“addEventListener”不起作用
- html - 为什么标签没有被包裹在 div 中?
- azure-data-factory - 在 azure 数据工厂中以数组格式存储单列 csv 文件