如何水平對齊跨度文本和輸入元素

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>