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

Question

我正在创建一个搜索表单。在这个搜索表单中，我使用了 <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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e0fbe5fbe5f8b7b0a1b4e4" rel="noreferrer noopener nofollow">[email protected]</a>/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的显示属性通过bootstrap设置为flex ，您已经将其作为 Flex 了。因此，要将它们垂直居中对齐，只需在行 div 中添加上面的类，如下所示:

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

并通过向 span 的父元素添加 text-right 类，使文本“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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b5aeb0aeb0ade2e5f4e1b1" rel="noreferrer noopener nofollow">[email protected]</a>/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>