html - 如何水平对齐跨度文本和输入元素

Question

我正在创建一个搜索表单。通过这个搜索表单，我使用了 <input>标签。在搜索栏旁边，我想要一个文字，上面写着“搜索定义”。目前，我在 span 标签中的搜索定义文本并未水平居中于搜索栏。
我试图通过添加 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/bootstrap@5.0.0-beta1/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>

Answer 1

您只需在 .row 中添加一个类div，类是 .align-items-center ，因为 row 的 display 属性被 bootstrap 设置为 flex，所以你已经把它作为一个 flex 了。因此，要将它们垂直居中对齐，只需在行 div 中添加上面的类，如下所示:

<div class="row align-items-center">
</div>

并通过添加类 text-right span 的父元素使文本“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/bootstrap@5.0.0-beta1/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>