我想在导航栏内添加一个搜索栏。这里我面临的问题是搜索栏内容没有在中心对齐，即使两个属性都存在align-items: center;和justify-content: center。帮我调整一下中间搜索栏的内容
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0;
}
.header {
background-color: black;
padding: 5px 0 5px 0;
text-align: center;
color: grey;
font-size: 20px;
text-shadow: 7px 2px 10px red;
margin: 0px;
}
/*--------------------------------------Search Box-------------------------------------- */
.search-box {
position: absolute;
/* top: 50%; */
right: 0;
/* transform: translate(-50%); */
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
/* .search-box:hover>.search-text {
width: 240px;
padding: 0 6px;
} */
.search-btn {
color: #e84118;
float: right;
width: 50px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.search-text {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 240px
}
/*--------------------------------------Search Box-------------------------------------- */
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
/* overflow: hidden; */
background-color: black;
/* position: sticky; */
/* top: 0; */
width: 100%;
z-index: 1;
/* border-radius: 15px; */
}
li {
float: left;
}
li a,
.dropbutton {
display: inline-block;
color: white;
padding: 14px 16px;
text-decoration: none;
text-align: center;
max-width: 80px;
/* font-weight: bold; */
}
li a:hover {
background-color: white;
color: black;
border-radius: 14.5px;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
overflow: hidden;
background-color: black;
max-width: 95px;
z-index: 1;
border-radius: 10px;
}
.dropdown-content a {
display: block;
color: white;
padding: 10px;
text-align: left;
font-size: 14px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
background-color: white;
}
/* .row {
display: flex;
flex-wrap: wrap;
} */
.left {
float: left;
width: 30%;
/* flex: 30%; */
padding: 20px;
background-color: #f1f1f1;
}
.right {
float: right;
width: 70%;
padding: 20px;
background-color: white;
;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.row::after {
content: " ";
display: block;
clear: both;
}
.footer {
width: 100%;
padding: 20px;
/* position: relative; */
bottom: 0px;
background-color: #aaa;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<title>layout-practice</title>
</head>
<body>
<!-- Header element -->
<div class="header">
<h1>!!!Hello World!!!</h1>
</div>
<!-- Navigation Bar -->
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Home">Blogs</a></li>
<li><a href="#Home">News</a></li>
<li><a href="#Switch">Switch</a>
<li class="dropdown"><a class="dropbutton" href="#Home">Settings</a>
<div class="dropdown-content">
<a href="#Account">Account</a>
<a href="#Notification">Notification</a>
<a href="#Password">Password</a>
<a href="#Lougout">Logout</a>
</div>
</li>
<!-- --------------------------------------Search Box-------------------------------------- -->
<div class="search-box">
<input class="search-text" type="text" name="search" placeholder="Type to search">
<a class="search-btn" href="#search">
<i class="fas fa-search"></i>
</a>
</div>
<!-- --------------------------------------Search Box-------------------------------------- -->
</ul>
<div class="row">
<div class="left">
<h1>My profile</h1>
<h5>Photo of me</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<P>This is my profile and i am the creater of this page. This is my profile and i am the creater of this page.
</P>
<h3>More Info.</h3>
<p>Here are some of my work portfolio:</p>
<div class="fakeimg" style="height: 100px;">Image</div><br>
<div class="fakeimg" style="height: 100px;">Image</div><br>
<div class="fakeimg" style="height: 100px;">Image</div>
</div>
<div class="right">
<h1>Title Heading</h1>
<h5> Title description Tue, Mar 9, 2021</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<p>Related Information</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<br>
<h1>Title Heading</h1>
<h5> Title description Tue, Mar 9, 2021</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<h3>Related Information</h3>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
</div>
</div>
<div class="footer">
<h1>Fotter</h1>
</div>
</body>
</html>将padding从搜索框中删除，并将text-align: center添加到.search-text中:
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0;
}
.header {
background-color: black;
padding: 5px 0 5px 0;
text-align: center;
color: grey;
font-size: 20px;
text-shadow: 7px 2px 10px red;
margin: 0px;
}
/*--------------------------------------Search Box-------------------------------------- */
.search-box {
position: absolute;
/* top: 50%; */
right: 0;
/* transform: translate(-50%); */
background: #2f3640;
height: 40px;
border-radius: 40px;
}
/* .search-box:hover>.search-text {
width: 240px;
padding: 0 6px;
} */
.search-btn {
color: #e84118;
float: right;
width: 50px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.search-text {
border: none;
background: none;
outline: none;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 240px;
text-align: center;
}
/*--------------------------------------Search Box-------------------------------------- */
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
/* overflow: hidden; */
background-color: black;
/* position: sticky; */
/* top: 0; */
width: 100%;
z-index: 1;
/* border-radius: 15px; */
}
li {
float: left;
}
li a,
.dropbutton {
display: inline-block;
color: white;
padding: 14px 16px;
text-decoration: none;
text-align: center;
max-width: 80px;
/* font-weight: bold; */
}
li a:hover {
background-color: white;
color: black;
border-radius: 14.5px;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
overflow: hidden;
background-color: black;
max-width: 95px;
z-index: 1;
border-radius: 10px;
}
.dropdown-content a {
display: block;
color: white;
padding: 10px;
text-align: left;
font-size: 14px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
background-color: white;
}
/* .row {
display: flex;
flex-wrap: wrap;
} */
.left {
float: left;
width: 30%;
/* flex: 30%; */
padding: 20px;
background-color: #f1f1f1;
}
.right {
float: right;
width: 70%;
padding: 20px;
background-color: white;
;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.row::after {
content: " ";
display: block;
clear: both;
}
.footer {
width: 100%;
padding: 20px;
/* position: relative; */
bottom: 0px;
background-color: #aaa;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<title>layout-practice</title>
</head>
<body>
<!-- Header element -->
<div class="header">
<h1>!!!Hello World!!!</h1>
</div>
<!-- Navigation Bar -->
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Home">Blogs</a></li>
<li><a href="#Home">News</a></li>
<li><a href="#Switch">Switch</a>
<li class="dropdown"><a class="dropbutton" href="#Home">Settings</a>
<div class="dropdown-content">
<a href="#Account">Account</a>
<a href="#Notification">Notification</a>
<a href="#Password">Password</a>
<a href="#Lougout">Logout</a>
</div>
</li>
<!-- --------------------------------------Search Box-------------------------------------- -->
<div class="search-box">
<input class="search-text" type="text" name="search" placeholder="Type to search">
<a class="search-btn" href="#search">
<i class="fas fa-search"></i>
</a>
</div>
<!-- --------------------------------------Search Box-------------------------------------- -->
</ul>
<div class="row">
<div class="left">
<h1>My profile</h1>
<h5>Photo of me</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<P>This is my profile and i am the creater of this page. This is my profile and i am the creater of this page.
</P>
<h3>More Info.</h3>
<p>Here are some of my work portfolio:</p>
<div class="fakeimg" style="height: 100px;">Image</div><br>
<div class="fakeimg" style="height: 100px;">Image</div><br>
<div class="fakeimg" style="height: 100px;">Image</div>
</div>
<div class="right">
<h1>Title Heading</h1>
<h5> Title description Tue, Mar 9, 2021</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<p>Related Information</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
<br>
<h1>Title Heading</h1>
<h5> Title description Tue, Mar 9, 2021</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<h3>Related Information</h3>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
</div>
</div>
<div class="footer">
<h1>Fotter</h1>
</div>
</body>
</html>search-box的内边距将其内容向下推，因为您对search-box具有相同的固定高度，包括内边距，共40px，以及输入行高度，也为40px。
添加到。然后输入。search-btn class height: 25px;