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

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

您可以将d-flex class 添加到行中以使其垂直对齐。

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

然后text-right class 到包含span的 div

<div class="col-md-4 text-right"> 
    <span class="text-bold-white-14">SEARCH DEFINITION </span>
  </div>

 .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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="background"> <div class="row d-flex align-items-center"> <div class="col-md-4 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>

Answer 2

您只需将一个 class 添加到您的.row div 中，class 是.align-items-center ，因为 row 的显示属性通过引导程序设置为 flex，所以您已经将它作为 flex 了。 因此，要将它们垂直居中对齐，只需在行 div 中添加 class 上方，如下所示：

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

并通过将 class text-right添加到 span 的父元素，使文本“搜索定义”与右侧对齐。

这是工作代码：

 .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>