我正在努力创建一个搜索表单。在这个搜索表单中，我使用了<input>标签。在搜索栏旁边，我想要一个文本单词“SEARCH DEFINITION”。目前，我的跨度标记中的搜索定义文本未在搜索栏水平居中。
我试图通过添加来处理这个问题padding-top: 15px;这让我对我想要的东西有类似的了解。这可以通过 css 属性实现吗？我尝试过使用display: inline-block;但没有效果。
我的预期结果是得到文本SEARCH DEFINITION与搜索栏并排显示，并与搜索栏中心水平对齐。类似于这张照片：
这是我的代码片段：
.background {
background-color:gray;
width: 100%;
height:200px;
}
span {
color: white;
display: inline-block;
}
input {
width: 400px;
border-radius: 4px;
border: 3px solid white;
font-size: 16px;
background-color: #fefefe;
padding: 12px 10px 12px 10px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="background">
<div class="row">
<div class="col-md-4 padding-top">
<span class="text-bold-white-14">SEARCH DEFINITION </span>
</div>
<div class="col-md-8">
<div class="search-bar">
<i class="fas search fa-search"></i>
<input type="text" name="search" placeholder="Search Keyword">
</div>
</div>
<!-- </div> -->
</div>
</div>
您只需要添加一个类到您的.rowdiv，类是.align-items-center，由于 row 通过 bootstrap 将显示属性设置为 flex，因此您已经将其作为 Flex 了。因此，要将它们垂直居中对齐，只需在行 div 中添加上面的类，如下所示：
<div class="row align-items-center">
</div>
并通过添加类text-rightspan 的父元素使文本“SEARCH DEFINITION”与右侧对齐。
这是工作代码：
.background {
background-color:gray;
width: 100%;
height:200px;
}
span {
color: white;
display: block;
text-align: right;
}
input {
width: 400px;
border-radius: 4px;
border: 3px solid white;
font-size: 16px;
background-color: #fefefe;
padding: 12px 10px 12px 10px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="background">
<div class="row align-items-center">
<div class="col-md-4 padding-top text-right">
<span class="text-bold-white-14">SEARCH DEFINITION </span>
</div>
<div class="col-md-8">
<div class="search-bar">
<i class="fas search fa-search"></i>
<input type="text" name="search" placeholder="Search Keyword">
</div>
</div>
<!-- </div> -->
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
